/* vorickgroup.com: look B, clean builder. Brand from the capability statement (navy and orange) and the logo (orange and blue). */
/* Barlow is served from our own /fonts/ folder (SIL Open Font License, see /fonts/OFL.txt), so no page calls another company's server. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/barlow-700.woff2") format("woff2"); }
:root {
  --navy: #10253F;
  --navy-2: #0B1A2E;
  --orange: #EB761B;
  --orange-dark: #B04C08; /* the small orange labels: 5.4 to 1 on white and 5.0 to 1 on the grey sections (#C2560A was 4.2 on grey, under the 4.5 asked) */
  --blue: #1BA9E1;
  --ink: #18212D;
  --muted: #5A6574;
  --line: #E2E6EC;
  --soft: #F4F6F8;
  --white: #FFFFFF;
  --radius: 10px;
  --wrap: 1180px;
  --head: "Barlow", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font: 17px/1.6 var(--body); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-decoration-color: rgba(235,118,27,.6); text-underline-offset: 3px; }
a:hover { color: var(--orange-dark); }
h1, h2, h3 { font-family: var(--head); color: var(--navy); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 99; background: var(--white); padding: 8px 12px; }
.eyebrow { font: 600 .82rem/1.2 var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--orange-dark); margin-bottom: .9em; }
.lead { font-size: 1.18rem; color: var(--muted); max-width: 62ch; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: .5em; padding: .8em 1.3em; border-radius: 999px; font: 600 1rem/1 var(--head); letter-spacing: .02em; text-decoration: none; border: 2px solid transparent; transition: background .15s, color .15s, border-color .15s; }
/* Navy on the brand orange is 5.3 to 1. White on it was 2.9 to 1, under the 4.5 the accessibility standard asks, so
   the orange stays the logo's orange and the words turn navy, the brand's other colour (Dean, 11 Nov 2026). */
.btn-primary { background: var(--orange); color: var(--navy); }
.btn-primary:hover { background: var(--orange-dark); color: var(--white); }
.btn-ghost { border-color: var(--navy); color: var(--navy); }
.btn-ghost:hover { background: var(--navy); color: var(--white); }
.btn-light { border-color: rgba(255,255,255,.7); color: var(--white); }
.btn-light:hover { background: var(--white); color: var(--navy); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6em; }

/* Header */
.site-head { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 76px; }
.brand img { height: 52px; width: auto; }
.nav { display: flex; align-items: center; gap: 26px; }
.nav a { font: 600 1rem/1 var(--head); color: var(--navy); text-decoration: none; letter-spacing: .02em; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--orange-dark); }
.nav .tel { color: var(--muted); font-weight: 500; }
.nav .btn { padding: .7em 1.1em; color: var(--navy); }
.nav .btn:hover, .menu-panel .btn:hover { color: var(--white); }
.menu { display: none; }
.menu summary { list-style: none; cursor: pointer; font: 600 1rem/1 var(--head); color: var(--navy); padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; }
.menu summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; left: 0; right: 0; top: 76px; background: var(--white); border-bottom: 1px solid var(--line); padding: 8px 20px 20px; box-shadow: 0 12px 24px rgba(16,37,63,.08); }
.menu-panel a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); font: 600 1.1rem/1.2 var(--head); color: var(--navy); text-decoration: none; }
.menu-panel .btn { margin-top: 14px; border-bottom: 0; justify-content: center; color: var(--navy); }
@media (max-width: 920px) { .nav { display: none; } .menu { display: block; } .brand img { height: 44px; } }

/* Sections */
section { padding: 76px 0; }
.soft { background: var(--soft); }
.dark { background: var(--navy); color: #DCE3EC; }
.dark h2, .dark h3 { color: var(--white); }
.dark a { color: var(--white); }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 34px; flex-wrap: wrap; }
.sec-head h2 { margin: 0; }

/* Hero */
.hero { padding: 64px 0 72px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.hero figure { margin: 0; }
.hero .frame { position: relative; isolation: isolate; margin: 0 0 0 14px; }
.hero .frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
.hero .frame::before { content: ""; position: absolute; left: -14px; top: 14px; bottom: -14px; width: 46%; background: var(--orange); border-radius: 14px; z-index: -1; }
.hero figcaption { padding-left: 14px; margin-top: 24px !important; }
.hero figcaption { margin-top: 12px; font-size: .88rem; color: var(--muted); }
.creds-line { margin-top: 1.4em; font-size: .92rem; color: var(--muted); }
@media (max-width: 920px) { .hero-grid { grid-template-columns: 1fr; gap: 36px; } .hero { padding-top: 36px; } }

/* Page header for inner pages */
.page-head { padding: 56px 0 44px; background: var(--soft); border-bottom: 1px solid var(--line); }
.page-head h1 { max-width: 22ch; }
.crumbs { font-size: .9rem; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--muted); }

/* Tiles */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tile { background: var(--white); border-top: 4px solid var(--orange); border-radius: 0 0 var(--radius) var(--radius); padding: 22px 22px 18px; box-shadow: 0 1px 0 var(--line); }
.tile b { display: block; font: 700 2.2rem/1 var(--head); color: var(--navy); margin-bottom: 10px; }
.tile span { color: var(--muted); font-size: .95rem; }
@media (max-width: 920px) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .tiles { grid-template-columns: 1fr; } }

/* Cards */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; } }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s, transform .15s; text-decoration: none; color: inherit; }
a.card:hover { border-color: var(--orange); box-shadow: 0 10px 28px rgba(16,37,63,.08); transform: translateY(-2px); color: inherit; }
.card .num { font: 700 .9rem/1 var(--head); color: var(--orange-dark); letter-spacing: .1em; margin-bottom: 18px; }
.card h2, .card h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: .4em; }
.card p { color: var(--muted); font-size: .97rem; margin: 0; }
.card .more { margin-top: auto; padding-top: 18px; font: 600 .95rem/1 var(--head); color: var(--navy); }
.pcard { padding: 0; overflow: hidden; }
.pcard img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; background: var(--soft); }
.pcard .ph-blank { aspect-ratio: 8 / 5; background: linear-gradient(135deg, var(--navy), #1d3d63); display: grid; place-items: center; }
.pcard .ph-blank img { width: 64px; height: auto; aspect-ratio: auto; background: none; opacity: .9; }
.pcard .body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.chip { display: inline-block; font: 600 .75rem/1 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--orange-dark); margin-bottom: 10px; }
.pcard .who { font-size: .9rem; color: var(--muted); margin-top: 6px; }

/* Lists */
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { position: relative; padding: 0 0 0 30px; margin: 0 0 14px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .42em; width: 16px; height: 9px; border-left: 3px solid var(--orange); border-bottom: 3px solid var(--orange); transform: rotate(-45deg); }
.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
@media (max-width: 920px) { .split { grid-template-columns: 1fr; gap: 28px; } }

/* Logos */
.logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.logos li { list-style: none; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); height: 96px; display: grid; place-items: center; padding: 16px 20px; }
.logos img { max-height: 54px; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: .78; transition: filter .2s, opacity .2s; }
.logos li:hover img { filter: none; opacity: 1; }
.logos { padding: 0; margin: 0; }
@media (max-width: 920px) { .logos { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .logos { grid-template-columns: repeat(2, 1fr); } }

/* CTA band */
.cta { background: var(--navy); color: #DCE3EC; padding: 64px 0; position: relative; overflow: hidden; }
.cta::after { content: ""; position: absolute; right: -120px; top: -120px; width: 360px; height: 360px; border: 40px solid rgba(235,118,27,.18); border-radius: 50%; }
.cta h2 { color: var(--white); }
.cta-row { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; position: relative; z-index: 1; }
.cta p { margin: 0; font-size: 1.1rem; }
.cta p.cta-extra { margin-top: 12px; font-size: 1rem; }
.cta p.cta-extra a { color: var(--white); text-decoration: underline; white-space: nowrap; }

/* Project and service detail */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 0 0 36px; }
.facts div { padding: 16px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
.facts dt { font: 600 .76rem/1.2 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.facts dd { margin: 0; font-weight: 600; color: var(--navy); }
.detail-img { border-radius: 14px; width: 100%; max-height: 560px; object-fit: cover; margin-bottom: 10px; }
.credit { font-size: .85rem; color: var(--muted); margin-bottom: 36px; }
.prose { max-width: 72ch; }
.prose h2 { margin-top: 1.4em; font-size: 1.6rem; }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { cursor: pointer; font: 600 1.12rem/1.35 var(--head); color: var(--navy); list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--orange); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 12px 0 0; color: var(--muted); }
.h-sm { font-size: 1.4rem; }
.card .bio { margin-top: 12px; color: var(--ink); }
.card.directors { max-width: 86ch; }
.card.directors h3 { font-size: 1.45rem; }
.card.directors .bio { font-size: 1.02rem; }
.role-facts { margin: 0 0 1.6em; }
.role-facts div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.role-facts dt { font: 600 .76rem/1.2 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.role-facts dd { margin: 0; font-weight: 600; color: var(--navy); }
.qlist { list-style: none; padding: 0; margin: 0 0 1.4em; }
.qlist li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.qlist a { font: 600 1.05rem/1.35 var(--head); text-decoration: none; }
.qlist a:hover { text-decoration: underline; }
.glance td:first-child { width: 32%; }
.glance a { font-weight: 600; }
.updated { white-space: nowrap; }

/* Tables */
.table { width: 100%; border-collapse: collapse; font-size: .96rem; }
.table th, .table td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font: 600 .78rem/1.2 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.table td:first-child { font-weight: 600; color: var(--navy); }
@media (max-width: 720px) { .table thead { display: none; } .table tr { display: block; border-bottom: 1px solid var(--line); padding: 10px 0; } .table td { display: block; border: 0; padding: 4px 0; } }

/* Contact */
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-list b { display: block; font: 600 .78rem/1.2 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.contact-list a, .contact-list span { font: 600 1.25rem/1.3 var(--head); color: var(--navy); text-decoration: none; }
.contact-list a:hover { color: var(--orange-dark); }

/* Footer */
.site-foot { background: var(--navy-2); color: #A9B6C6; padding: 60px 0 30px; font-size: .95rem; }
.site-foot a { color: #DCE3EC; text-decoration: none; }
.site-foot a:hover { color: var(--orange); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.foot-grid h3 { color: var(--white); font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li { margin-bottom: 8px; }
.foot-logo { background: var(--white); display: inline-block; padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; }
.foot-logo img { height: 46px; width: auto; }
.foot-base { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: .85rem; }
.neca { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.neca img { width: 44px; height: 44px; background: var(--white); border-radius: 6px; padding: 3px; }
@media (max-width: 920px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }