:root { --field:#f6f2e9; --cover-field:#ece6d9; --ink:#101319; --accent:#2a3cff; --hairline:#ddd6c6; --secondary:#565d6b; --body:#2b303b; --header-h:76px; }
* { box-sizing:border-box; }
/* Sticky header. scroll-padding-top keeps the in-page anchors from landing
   underneath it: --header-h is the header's own height, measured below. */
html { scroll-behavior:smooth; background:var(--field); scroll-padding-top:var(--header-h); }
body { margin:0; color:var(--body); background:var(--field); font-family:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif; font-size:16px; line-height:1.45; }
a { color:inherit; text-decoration-thickness:1px; text-underline-offset:3px; }
a:focus-visible, input:focus-visible, textarea:focus-visible, button:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.page-shell { width:min(100% - 80px, 1360px); margin-inline:auto; }

/* --- Header --- */
.site-header { position:sticky; top:0; z-index:10; border-top:4px solid var(--ink); background:var(--field); }
.header-row { min-height:72px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--hairline); }
.wordmark { color:var(--ink); font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif; font-size:15px; font-weight:700; text-decoration:none; }
nav { display:flex; align-items:center; gap:10px; color:var(--secondary); font-size:13px; font-weight:500; }
nav a { text-decoration:none; }
nav a:hover { color:var(--accent); text-decoration:underline; }
.eyebrow { color:var(--secondary); font-size:10.5px; font-weight:600; letter-spacing:.08em; line-height:1.35; text-transform:uppercase; }

/* --- Hero. Only the display type sits on the photograph. Ink on the lightest
   sand measures about 4:1, which carries 104px type but not 17px body copy, so
   the lede and the calls to action moved onto cream below the image instead of
   being rescued with a scrim. The image anchors left because that half is the
   quiet one: anchoring right kept the waterline under the headline as the
   viewport narrowed. --- */
.hero { display:grid; align-items:end; min-height:clamp(360px,52vh,620px);
  background:var(--cover-field) no-repeat left center / cover;
  /* Three declarations, last supported one wins. The generator tops out at 1672px,
     so the 2x file is that frame enlarged and resharpened: no new detail, but the
     browser then downsamples it instead of stretching 1.8x, which is the whole
     difference on a retina display. A 1x screen never fetches the 380K file. */
  background-image:url("assets/hero.jpg");
  background-image:-webkit-image-set(url("assets/hero.webp") 1x, url("assets/hero-2x.webp") 2x);
  background-image:image-set(url("assets/hero.webp") 1x, url("assets/hero-2x.webp") 2x); }
.hero-inner { padding:clamp(48px,6vw,84px) 0 clamp(40px,4.5vw,64px); }
h1 { max-width:16ch; margin:24px 0 0; color:var(--ink); font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif; font-size:clamp(44px,7.4vw,104px); font-weight:700; line-height:1.02; letter-spacing:-.035em; }
.hero .eyebrow { color:var(--body); }
.hero-foot-band { border-bottom:4px solid var(--accent); background:var(--cover-field); }
.hero-foot { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:70px; align-items:end; padding:30px 0 34px; }
.hero-lede { max-width:62ch; margin:0; font-size:17px; line-height:1.55; }
.hero-actions { display:flex; flex-wrap:wrap; gap:32px; margin:0; font-weight:500; white-space:nowrap; }
.hero-actions a { color:var(--ink); }
.primary-link, .download-link { color:var(--accent); font-weight:600; }

/* --- Bands --- */
.band { border-bottom:1px solid var(--hairline); padding:102px 0; }
h2 { max-width:20ch; margin:20px 0 0; color:var(--ink); font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif; font-size:clamp(38px,4.2vw,64px); font-weight:700; line-height:1.06; letter-spacing:-.03em; }
h3 { margin:0; color:var(--ink); font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif; font-size:22px; line-height:1.12; letter-spacing:-.025em; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:48px; }
.section-heading h2 { margin-top:0; }
.section-heading > p { max-width:300px; margin:0; color:var(--secondary); font-size:14px; }

.capabilities { background:var(--field); }

.formats { background:var(--cover-field); }
.offer { display:grid; grid-template-columns:repeat(3, 1fr); margin:62px 0 0; padding:0; list-style:none; border-top:1px solid var(--hairline); }
.offer li { border-bottom:1px solid var(--hairline); }
.offer li + li { border-left:1px solid var(--hairline); }
.offer a { display:block; height:100%; padding:24px 27px 30px 0; text-decoration:none; }
.offer li + li a { padding-left:27px; }
.offer strong { display:block; margin-top:16px; color:var(--ink); font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif; font-size:26px; font-weight:700; letter-spacing:-.025em; }
.offer span:last-child { display:block; margin-top:14px; color:var(--secondary); font-size:15px; line-height:1.55; }
.offer a:hover strong { color:var(--accent); }
/* The commissioned column is the product: it carries the accent and the deeper ground. */
.offer li.offer-lead { border-bottom:3px solid var(--accent); background:var(--field); }
.offer-lead .eyebrow { color:var(--accent); }
.capability-grid { display:grid; grid-template-columns:repeat(4, 1fr); margin-top:62px; border-top:1px solid var(--hairline); }
.capability-grid article { padding:22px 27px 28px 0; }
.capability-grid article + article { padding-left:27px; border-left:1px solid var(--hairline); }
.capability-grid p { margin:18px 0 0; font-size:15px; line-height:1.55; }

.library { background:var(--field); }
.library-intro { display:grid; grid-template-columns:1fr 1fr; gap:60px; max-width:940px; margin-top:52px; font-size:17px; line-height:1.55; }
.library-intro p { margin:0; }
.library-list { margin-top:62px; border-top:1px solid var(--hairline); }
.library-list > div { display:grid; grid-template-columns:30% 1fr 145px; gap:24px; align-items:baseline; padding:20px 0; border-bottom:1px solid var(--hairline); }
.library-list strong { color:var(--ink); font-weight:600; }
.library-list span { color:var(--secondary); }
.library-list em { color:var(--secondary); font-size:10.5px; font-style:normal; font-weight:600; letter-spacing:.08em; text-align:right; text-transform:uppercase; }
.library-action { margin:30px 0 0; }
.library-action small { display:block; margin-top:10px; color:var(--secondary); }

.method { background:var(--cover-field); }
.method-list { margin:62px 0 0; padding:0; list-style:none; border-top:1px solid var(--hairline); }
.method-list li { display:grid; grid-template-columns:10% 28% 1fr; gap:20px; align-items:baseline; padding:21px 0; border-bottom:1px solid var(--hairline); }
.method-list li > span { color:var(--secondary); font-size:11px; font-weight:600; letter-spacing:.08em; }
.method-list strong { color:var(--ink); font-size:18px; font-weight:600; }
.method-list p { margin:0; color:var(--secondary); }

.briefs { background:var(--field); }
.brief-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:48px 28px; margin-top:62px; }
.brief-card { display:flex; flex-direction:column; }
.brief-card > img, .placeholder-cover { aspect-ratio:3 / 4; width:100%; border:1px solid var(--hairline); background:var(--cover-field); object-fit:cover; }
/* Built like a cover rather than a grey box: ink rule above, accent rule below,
   title at the top. Bottom-aligned it landed one line above the caption and read
   as the same title printed twice. */
.placeholder-cover { display:flex; align-items:flex-start; padding:26px 22px; border-top:4px solid var(--ink); border-bottom:4px solid var(--accent); color:var(--ink); font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif; font-size:24px; font-weight:700; line-height:1.08; letter-spacing:-.03em; }
.brief-card h3 { margin-top:18px; }
.brief-card > p { margin:10px 0 0; color:var(--secondary); font-size:14px; line-height:1.5; }
.brief-card .download-link { margin-top:18px; }

.about { background:var(--cover-field); }
.about-layout, .contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:100px; }
.about-layout > div:last-child { max-width:570px; font-size:17px; line-height:1.55; }
.about-layout > div:last-child p { margin:0 0 24px; }

.contact { background:var(--field); }
.contact form { max-width:620px; }
form label { display:block; color:var(--secondary); font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.contact-fields { display:grid; grid-template-columns:1fr 1fr; gap:22px 18px; }
.contact-fields .wide { grid-column:1 / -1; }
.contact input, .contact textarea { display:block; width:100%; margin-top:9px; border:1px solid var(--ink); padding:12px 14px; color:var(--ink); background:var(--field); font:inherit; }
.contact textarea { resize:vertical; }
button { min-height:53px; margin-top:22px; border:1px solid var(--ink); padding:0 18px; color:var(--field); background:var(--ink); font:inherit; font-weight:600; cursor:pointer; }
button:hover { background:var(--accent); border-color:var(--accent); }

.site-footer { border-bottom:4px solid var(--accent); padding:30px 0; background:var(--field); }
.footer-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:30px; }
.footer-grid p { margin:0; color:var(--secondary); font-size:12px; line-height:1.6; }
.footer-grid p:last-child { text-align:right; }

@media (max-width:1000px) {
  .capability-grid { grid-template-columns:repeat(2, 1fr); }
  .hero-foot { grid-template-columns:1fr; gap:30px; align-items:start; }
  .capability-grid article:nth-child(odd) { padding-left:0; border-left:0; }
}

@media (max-width:760px) {
  .capability-grid, .offer, .brief-grid, .library-intro, .about-layout, .contact-layout { grid-template-columns:1fr; }
  .capability-grid, .offer, .brief-grid { margin-top:40px; }
  .capability-grid article, .capability-grid article + article { padding:22px 0; border-left:0; border-bottom:1px solid var(--hairline); }
  .offer li + li { border-left:0; }
  .offer a, .offer li + li a { padding:22px 0 26px; }
  .offer strong { font-size:23px; }
  .capability-grid article:last-child { border-bottom:0; }
  .library-intro { gap:22px; margin-top:38px; }
  .library-list { margin-top:40px; }
  .library-list > div { grid-template-columns:1fr; gap:7px; }
  .library-list em { text-align:left; }
  .brief-grid { gap:42px; }
  .brief-card > img, .placeholder-cover { max-width:340px; }
  .about-layout, .contact-layout { gap:44px; }
  .contact-fields { grid-template-columns:1fr; }

  /* --- Layout --- */
  .page-shell { width:min(100% - 40px, 1360px); }
  .band { padding:64px 0; }
  .section-heading { display:block; }
  .section-heading > p { max-width:none; margin-top:18px; }
  .footer-grid { grid-template-columns:1fr; gap:14px; }
  .footer-grid p:last-child { text-align:left; }

  /* --- Header. Six nav items will not fit on one 375px line, and a second row for
     them costs 14% of the viewport on every screen. Keep the single row: the
     wordmark, and the two links a phone reader actually wants. The other four
     sections are reachable by scrolling, which is what a phone does anyway. --- */
  :root { --header-h:68px; }
  .header-row { min-height:64px; }
  .wordmark { font-size:16px; }
  nav { gap:0; font-size:14px; }
  nav a { padding:13px 0; white-space:nowrap; }
  nav > *:not(.nav-key) { display:none; }
  /* Keep one real separator rather than drawing one with ::before, which would sit
     inside the Contact link's tap area. The span after Briefs is the one that ends
     up between the two once the hidden items collapse. */
  nav a.nav-key + span { display:inline; padding:0 16px; color:var(--hairline); }

  .hero-inner { padding:40px 0 44px; }
  h1 { margin-top:20px; font-size:clamp(40px,10.5vw,62px); }
  .hero-foot { padding:24px 0 28px; }
  .hero-actions { flex-direction:column; align-items:flex-start; gap:2px; }

  .method-list { margin-top:36px; }
  .method-list li { grid-template-columns:34px 1fr; gap:6px 10px; padding:18px 0; }
  .method-list p { grid-column:2; }

  /* --- Touch targets. Every standalone link is a button on a phone, so give it
     44px of height rather than the 23px a bare inline link gets. --- */
  .hero-actions a, .library-action a, .download-link, .footer-grid a {
    display:inline-block; min-height:44px; padding:11px 0; }
  .contact input, .contact textarea { min-height:48px; padding:13px 14px; font-size:16px; }
  .contact button { width:100%; min-height:52px; }
}

/* Below 380 the headline is the only thing that still needs easing. */
@media (max-width:380px) {
  h1 { font-size:clamp(36px,10vw,44px); }
}