/* ============================================================
   Rossblad
   Palette lives in the ACTIVE block. Swap it for one of the
   alternates below to recolour the entire site.
   ============================================================ */

:root{
  color-scheme: only light;

  /* ---- ACTIVE: Cold Green ---- */
  --paper:#FBFBF9;
  --paper-2:#EFF0EC;
  --ink:#141715;
  --soft:#565D57;
  --line:#D9DBD4;
  --accent:#183429;
  --accent-2:#21473A;
  --on-accent:#F2F5F1;

  /* ---- ALT: Ink Blue ----
  --paper:#FAFBFC; --paper-2:#EDEFF2; --ink:#12151A;
  --soft:#535A64;  --line:#D7DAE0;
  --accent:#16202B; --accent-2:#22303F; --on-accent:#EEF1F5;
  ------------------------------ */

  /* ---- ALT: Oxblood ----
  --paper:#FCFBF7; --paper-2:#F2EFE7; --ink:#16181A;
  --soft:#5C6167;  --line:#DCD8CD;
  --accent:#5E1F22; --accent-2:#7A2B2F; --on-accent:#F7F1EC;
  ----------------------- */

  --serif:'Newsreader', Georgia, serif;
  --sans:'Archivo', system-ui, sans-serif;

  --w:1520px;
  --pad:clamp(20px,4vw,56px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper);scroll-padding-top:86px}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
}
img{max-width:100%;display:block}
picture{display:contents}
a{color:inherit}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.w{max-width:var(--w);margin:0 auto;padding:0 var(--pad)}
.measure{max-width:68ch}

/* ================= NAV ================= */
.nav{border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:40}
.nav .w{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{font-weight:600;font-size:19px;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);text-decoration:none}
.nav ul{display:flex;gap:32px;list-style:none;font-size:16px}
.nav ul a{color:var(--soft);text-decoration:none}
.nav ul a:hover,.nav ul a[aria-current]{color:var(--accent)}
.navtoggle{
  display:none;background:none;border:1px solid var(--line);cursor:pointer;
  font-family:var(--sans);font-size:13px;letter-spacing:.04em;color:var(--ink);
  padding:9px 15px;
}

/* ================= BUTTONS ================= */
.btn{
  display:inline-block;text-decoration:none;background:var(--accent);color:#fff;
  font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.03em;
  padding:16px 32px;transition:background .16s;
}
.btn:hover{background:var(--accent-2)}
.btn.line{background:none;color:var(--accent);padding:0;border-bottom:1px solid var(--accent)}
.btn.line:hover{background:none;color:var(--accent-2)}

/* ================= MASTHEAD ================= */
.mast{padding:clamp(60px,8vw,124px) 0 clamp(40px,6vw,96px)}
.mast .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);align-items:center}
.mast h1{
  font-size:clamp(38px,5.6vw,76px);font-weight:400;line-height:1.06;
  letter-spacing:-.021em;
}
.mast h1 em{font-style:italic;color:var(--accent)}
.mast .lede{margin-top:30px;max-width:54ch;color:var(--soft);font-size:clamp(18px,1.4vw,21px)}
.mast .lede b{color:var(--ink);font-weight:500}
.mast .btn{margin-top:38px}
.mast .shot{aspect-ratio:4/5;background:var(--paper-2);overflow:hidden}
.mast .shot img{width:100%;height:100%;object-fit:cover}

/* image band — held to the container so it never has to zoom in to fill a wide
   screen. At full width its box is close to the source ratio, so the crop is
   almost nothing and the frame stays readable. Used deeper in the page, never
   directly under the masthead. */
.band{max-width:var(--w);margin:0 auto;padding:0 var(--pad)}
.band img{width:100%;height:clamp(190px,23vw,340px);object-fit:cover;background:var(--paper-2)}

/* ================= SECTIONS ================= */
section{padding:clamp(56px,7vw,104px) 0}
section.alt{background:var(--paper-2)}
section.dark{background:var(--accent);color:var(--on-accent)}
section.dark .eyebrow{color:rgba(255,255,255,.62)}
section.dark h2,section.dark h3{color:#fff}
section.dark p{color:rgba(255,255,255,.8)}

.eyebrow{
  font-family:var(--sans);font-size:12.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin-bottom:22px;
}
h2{font-size:clamp(28px,3.6vw,48px);font-weight:400;line-height:1.14;letter-spacing:-.017em;max-width:22ch}
/* Heading, then its lead directly underneath. The old two-column version left a
   sentence floating in space beside the heading and it read as detached. */
.sectop{margin-bottom:clamp(36px,4vw,58px)}
.sectop .aside{margin-top:20px;max-width:60ch;color:var(--soft);font-size:19px}
section.dark .sectop .aside{color:rgba(255,255,255,.75)}

/* ================= FINDINGS (3-up) ================= */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--ink)}
.cols3 .col{padding:32px 40px 40px 0;border-right:1px solid var(--line)}
.cols3 .col:last-child{border-right:none;padding-right:0}
.cols3 .col:not(:first-child){padding-left:40px}
.cols3 h3{font-size:23px;font-weight:500;line-height:1.25;margin-bottom:14px}
.cols3 p{color:var(--soft);font-size:17px}

/* ================= SERVICES (2-up cards) ================= */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px)}
.card{background:var(--paper);padding:38px 36px;border-top:3px solid var(--accent)}
section.alt .card{background:var(--paper)}
.card h3{font-size:27px;font-weight:500}
.card .meta{font-family:var(--sans);font-size:13px;letter-spacing:.04em;color:var(--soft);margin-top:8px}
.card p{color:var(--soft);font-size:17px;margin-top:18px}

/* ================= METHOD (2x2) ================= */
.grid2x2{display:grid;grid-template-columns:1fr 1fr;gap:0}
.grid2x2 .rule{padding:34px 40px 34px 0;border-top:1px solid var(--line)}
.grid2x2 .rule:nth-child(odd){border-right:1px solid var(--line)}
.grid2x2 .rule:nth-child(even){padding-left:40px}
.grid2x2 .rule:nth-child(-n+2){border-top:1px solid var(--ink)}
.grid2x2 .num{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--accent);margin-bottom:12px}
section.dark .grid2x2 .num{color:rgba(255,255,255,.7)}
section.dark .grid2x2 .rule{border-color:rgba(255,255,255,.2)}
section.dark .grid2x2 .rule:nth-child(-n+2){border-color:rgba(255,255,255,.45)}
.grid2x2 h3{font-size:22px;font-weight:500;margin-bottom:10px}
.grid2x2 p{color:var(--soft);font-size:17px;max-width:60ch}

/* ================= WORK (dark) ================= */
.case{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(32px,5vw,76px);align-items:start}
.case .body p{margin-bottom:16px}
.conf{
  margin-top:26px;padding:20px 24px;border-left:2px solid rgba(255,255,255,.5);
  font-size:17px;color:rgba(255,255,255,.78);
}
.quote{margin-top:clamp(38px,4vw,58px);padding-top:38px;border-top:1px solid rgba(255,255,255,.28)}
.quote blockquote{font-size:clamp(21px,2.3vw,30px);line-height:1.36;font-style:italic;max-width:30ch;color:#fff}
.quote figcaption{margin-top:24px;font-family:var(--sans);font-size:14px;color:rgba(255,255,255,.7);line-height:1.65}
.quote figcaption b{display:block;color:#fff;font-weight:600}
.letter{display:block;width:100%;padding:0;border:none;background:#fff;cursor:zoom-in}
.letter img{width:100%;height:auto}
.letter-cap{margin-top:12px;font-family:var(--sans);font-size:12.5px;color:rgba(255,255,255,.62)}

/* ================= FIRM (image + text) ================= */
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:center}
.split .shot{aspect-ratio:4/3;background:var(--paper-2);overflow:hidden}
.split .shot img{width:100%;height:100%;object-fit:cover}

/* ================= TERMS ================= */
.terms{border-top:1px solid var(--ink)}
.term{display:grid;grid-template-columns:280px 1fr;gap:clamp(24px,4vw,60px);padding:24px 0;border-bottom:1px solid var(--line)}
.term dt{font-weight:500;font-size:19px}
.term dd{color:var(--soft);font-size:17px}

/* ================= CONTACT ================= */
.contact{background:var(--accent);color:#fff;padding:clamp(64px,7vw,100px) 0}
.contact .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:end}
.contact h2{color:#fff;max-width:18ch}
.contact a.mail{display:inline-block;color:#fff;font-size:clamp(22px,2.6vw,32px);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:5px}
.contact a.mail:hover{border-color:#fff}
.contact .note{color:rgba(255,255,255,.72);font-size:17px;max-width:44ch}
footer{background:var(--accent);color:rgba(255,255,255,.58);padding-bottom:44px}
footer .w{display:flex;gap:30px;flex-wrap:wrap;font-family:var(--sans);font-size:13px;border-top:1px solid rgba(255,255,255,.18);padding-top:26px}

/* ================= PEOPLE (firm page) ================= */
.people{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px)}
.person .shot{aspect-ratio:4/5;background:var(--paper-2);overflow:hidden}
.person .shot img{width:100%;height:100%;object-fit:cover}
.person h3{font-size:27px;font-weight:500;border-top:2px solid var(--accent);padding-top:22px}
.person .study{font-family:var(--sans);font-size:13.5px;color:var(--soft);margin-top:6px}
.person p{color:var(--soft);font-size:17px;margin-top:18px}
.person .mailto{display:inline-block;margin-top:16px;font-family:var(--sans);font-size:14px;color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line)}
.person .mailto:hover{border-color:var(--accent)}

/* ================= LIGHTBOX ================= */
dialog.lb{border:none;padding:0;background:transparent;max-width:min(92vw,740px);width:100%;margin:auto}
dialog.lb::backdrop{background:rgba(12,16,13,.88)}
dialog.lb .box{background:#fff;border:1px solid var(--line)}
dialog.lb .bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 20px;border-bottom:1px solid var(--line);font-family:var(--sans);font-size:12.5px;color:var(--soft)}
dialog.lb button{background:none;border:none;cursor:pointer;color:var(--accent);font-family:var(--sans);font-size:12.5px}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important}
}

/* ================= RESPONSIVE ================= */
@media(max-width:1080px){
  .cols3{grid-template-columns:1fr}
  .cols3 .col{border-right:none;border-bottom:1px solid var(--line);padding:26px 0 30px !important}
  .cols3 .col:last-child{border-bottom:none}
}
@media(max-width:900px){
  body{font-size:17px}
  .nav ul{gap:20px;font-size:15px}
  .mast .grid,.cols2,.grid2x2,.case,.split,.people,.contact .grid{grid-template-columns:1fr}
  .mast .grid{gap:36px}
  .mast .shot{aspect-ratio:16/10}
  .grid2x2 .rule{padding:26px 0 !important;border-right:none !important}
  .grid2x2 .rule:nth-child(2){border-top:1px solid var(--line)}
  .split{gap:32px}
  .split .shot{order:-1}
  .term{grid-template-columns:1fr;gap:6px}
}
@media(max-width:760px){
  .band.secondary{display:none}
  .navtoggle{display:block}
  .nav .w{position:relative}
  .nav ul{
    display:none;position:absolute;top:100%;right:var(--pad);
    flex-direction:column;gap:0;min-width:190px;
    background:var(--paper);border:1px solid var(--line);
    padding:6px 0;box-shadow:0 10px 28px rgba(0,0,0,.09);
  }
  .nav ul.open{display:flex}
  .nav ul a{display:block;padding:11px 18px}
}