/* Lucky One — site stylesheet */

@font-face{
  font-family:'Neue Haas Grotesk';
  src:url('assets/fonts/nhg-regular.woff2') format('woff2'),
      url('assets/fonts/nhg-regular.woff') format('woff'),
      url('assets/fonts/nhg-regular.otf') format('opentype');
  font-weight:100 500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Neue Haas Grotesk';
  src:url('assets/fonts/nhg-medium.woff2') format('woff2'),
      url('assets/fonts/nhg-medium.woff') format('woff'),
      url('assets/fonts/nhg-medium.otf') format('opentype');
  font-weight:501 800;
  font-style:normal;
  font-display:swap;
}

:root{
  --ink:#2d2d2d;
  --black:#181818;
  --stone:#b4b2a8;
  --mist:#c7c6c6;
  --paper:#f5f4f0;
  --white:#ffffff;
  --nav-h:100px;
  --gap:20px;
  font-size:16px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Neue Haas Grotesk',-apple-system,'Helvetica Neue',Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}

.container{
  width:100%;
  margin:0 auto;
  padding:0 20px;
  position:relative;
}

/* ---------- Nav ---------- */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  background:transparent;
}
.nav--dark{background:var(--black);}
.nav--light{background:var(--paper);border-bottom:1px solid rgba(45,45,45,0.12);}
.nav .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  gap:24px;
}
/* Pinned to the literal top-left corner of the page (0,0), ignoring the
   .nav container's usual 20px side padding — matches the home page's
   .home-logo treatment. .nav has position:sticky, which still establishes
   a positioning context for this absolute child, so it stays flush with
   the sticky header's own top-left corner as you scroll. */
.nav__logo{
  position:absolute;
  top:0;
  left:0;
  z-index:60;
  flex:none;
  display:block;
  line-height:0;
}
.nav__logo img{display:block;width:auto;height:60px;}
.nav__links{
  display:flex;
  gap:36px;
  margin-left:auto;
}
.nav__links a{
  position:relative;
  font-size:15px;
  font-weight:600;
  letter-spacing:-0.3px;
  text-transform:lowercase;
  transition:opacity .15s ease, color .15s ease;
}

/* Dark nav (index, services): flat #2d2d2d inactive links, going solid
   white on hover/active — matches the home logo and hero filter words.
   Applied site-wide (not just the home page) so every dark-nav page reads
   the same way. */
.nav--dark .nav__links a{color:var(--ink);}
.nav--dark .nav__links a:hover,
.nav--dark .nav__links a.is-active{color:var(--white);}

/* Light nav (projects, project detail): same "solid vs faded" language,
   achieved via opacity since the active colour (white) wouldn't show up
   on the light background. */
.nav--light .nav__links a{color:var(--ink);opacity:0.4;}
.nav--light .nav__links a:hover,
.nav--light .nav__links a.is-active{opacity:1;}

/* Active nav item: 0.5px underline, 10px below the link, spanning exactly
   the width of the word itself (the anchor has no horizontal padding, so
   its box width already equals the rendered word width). currentColor so
   it's always visible against either nav background. */
.nav__links a.is-active::after{
  content:'';
  position:absolute;
  left:0;
  top:calc(100% + 10px);
  width:100%;
  height:0.5px;
  background:currentColor;
}

.nav__social{display:flex;gap:14px;align-items:center;}
.nav__social img{width:15px;height:15px;opacity:.7;}
.nav__social a:hover img{opacity:1;}
/* Home page only: the opacity dimming above blends the icon with the
   black backdrop, landing lighter than the flat #2d2d2d used elsewhere —
   go full opacity here so the filter's colour reads true. */
.home .nav__social img{opacity:1;}
.nav__toggle{
  display:none;
  background:none;
  border:0;
  padding:8px;
}
.nav__toggle img{width:26px;}

@media (max-width:820px){
  .nav__links{
    position:fixed;
    inset:var(--nav-h) 0 0 0;
    background:var(--black);
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    padding:24px 20px;
    margin:0;
    transform:translateY(-110%);
    transition:transform .25s ease;
  }
  .nav--light .nav__links{background:var(--ink);}
  .nav__links.is-open{transform:translateY(0);}
  .nav--dark .nav__links a,
  .nav--light .nav__links a{color:var(--white);font-size:22px;padding:10px 0;}
  .nav__toggle{display:block;}
  .nav__social{display:none;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:38px;
  padding:0 22px;
  border-radius:20px;
  font-size:14px;
  font-weight:600;
  letter-spacing:-0.2px;
  white-space:nowrap;
}
.btn--outline{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--ink);
}
.btn--outline:hover{background:var(--ink);color:var(--white);}
.btn--on-dark{color:var(--white);border-color:rgba(255,255,255,0.5);}
.btn--on-dark:hover{background:var(--white);color:var(--ink);}
.btn--solid{
  background:var(--ink);
  color:var(--white);
  border:1px solid var(--ink);
  height:auto;
  padding:16px 28px;
  border-radius:6px;
  font-size:15px;
}
.btn--solid:hover{background:#000;}
.btn--solid-sm{
  background:var(--ink);
  color:var(--white);
  border:1px solid var(--ink);
  height:34px;
  padding:0 18px;
  border-radius:20px;
  font-size:13px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn--solid-sm:hover{background:#000;}

/* ---------- Sections ---------- */
.eyebrow{
  font-size:12px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--mist);
  margin:0 0 8px;
}
.section--dark .eyebrow, .section--black .eyebrow{color:#7a7a76;}
.section-title{
  font-size:24px;
  font-weight:600;
  letter-spacing:-0.5px;
  margin:0 0 28px;
}
.section{padding:80px 0;}
.section--stone{background:var(--stone);color:var(--ink);}
.section--dark, .section--black{background:var(--black);color:var(--white);}

/* ---------- Hero ---------- */
.hero{
  background:var(--black);
  position:relative;
  overflow:hidden;
}

/* Home page brand mark — see index.html for markup. It's a sibling of
   <header>, not a descendant, so it isn't affected by .hero's
   overflow:hidden and can grow taller than the hero section itself.
   No ancestor between it and the document root is positioned, so
   top:0/left:0 anchor it to the literal top-left corner of the page —
   it scrolls away with the rest of the content rather than staying fixed.
   script.js sets the image's height on load/resize so its bottom edge
   always lines up with the bottom of "Everything Else" in the hero title. */
.home-logo{
  position:absolute;
  top:0;
  left:0;
  z-index:60;
  display:block;
  line-height:0;
}
.home-logo img{
  display:block;
  width:auto;
}

.hero__inner{
  width:100%;
  margin:0 auto;
  padding:110px 20px 90px;
  display:flex;
  justify-content:flex-end;
  position:relative;
}
.hero__title{
  font-size:clamp(34px,5.5vw,70px);
  line-height:1.05;
  font-weight:700;
  letter-spacing:-1.75px;
  text-align:right;
  color:rgba(255,255,255,0.22);
  max-width:640px;
  margin:0;
}

/* Hero title words double as the home page's category filters — same
   ghosted weight/size as before, but each word is a real button that
   lights up to full white on hover, and stays white while its category
   is the active filter. */
.hero-filter{
  background:none;
  border:0;
  margin:0;
  padding:0;
  font:inherit;
  letter-spacing:inherit;
  color:var(--ink);
  cursor:pointer;
  transition:color .2s ease;
}
.hero-filter:hover{color:var(--white);}
.hero-filter.is-active{color:var(--white);}

/* ---------- Project grid (home) ---------- */
/* Row-major CSS Grid (not CSS-column masonry): every card in a given row
   shares that row's track height exactly, so the block of 10 cards reads
   as two perfectly flush rows — top edge of row 1 and bottom edge of row 2
   both dead straight — instead of the ragged bottoms you get from
   multi-column masonry. Each row's height still comes from its own tallest
   card, so row 1 and row 2 can differ in height (the "cascade" between
   tiers), while every .pcard stretches to fill its row and crops its photo
   with object-fit:cover to match. Cards fade/slide in on render (see
   script.js for the staggered animation-delay) for the "loading in" feel. */
.project-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--gap);
  align-items:stretch;
}
@media (min-width:640px){ .project-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:900px){ .project-grid{grid-template-columns:repeat(3,1fr);} }
@media (min-width:1200px){ .project-grid{grid-template-columns:repeat(5,1fr);} }

.pcard{
  position:relative;
  color:inherit;
  display:flex;
  flex-direction:column;
  height:100%;
  opacity:0;
  transform:translateY(18px);
  animation:pcardIn .5s ease forwards;
  transition:transform .3s ease;
}
@keyframes pcardIn{ to{ opacity:1; transform:translateY(0); } }
.pcard:hover{transform:translateY(-4px);}

.pcard__img{
  position:relative;
  overflow:hidden;
  border-radius:6px;
  background:#2a2a2a;
  flex:1 1 auto;
  min-height:160px;
}
.pcard__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.pcard:hover .pcard__img img{transform:scale(1.05);}
.pcard:hover .pcard__img{box-shadow:0 25px 55px -15px rgba(0,0,0,.65);}

/* Hover overlay: title/desc stay visible below the image always (so the
   card still reads on touch devices with no hover) — the overlay just adds
   a "View Project" prompt over the photo itself as the extra hover cue. */
.pcard__overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  padding:18px;
  background:linear-gradient(to top, rgba(0,0,0,.72), transparent 55%);
  opacity:0;
  transition:opacity .3s ease;
}
.pcard:hover .pcard__overlay{opacity:1;}
.pcard__view{
  color:var(--white);
  font-size:14px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.pcard__view span{display:inline-block;transition:transform .3s ease;}
.pcard:hover .pcard__view span{transform:translateX(4px);}

.pcard__cats{display:flex;gap:8px;margin-top:14px;}
.pcard__cats img{width:36px;height:36px;filter:invert(1);opacity:.55;}
.pcard__title{
  margin:14px 0 6px;
  font-size:18px;
  font-weight:600;
  letter-spacing:-0.3px;
  color:var(--white);
}
.pcard__desc{
  margin:0 0 20px;
  font-size:13px;
  line-height:1.5;
  letter-spacing:-0.1px;
  color:#8f8f8b;
  max-width:34em;
}

/* ---------- Project quick-preview modal ---------- */
body.no-scroll{overflow:hidden;}
.pmodal{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  visibility:hidden;
  opacity:0;
  transition:opacity .3s ease, visibility 0s linear .3s;
}
.pmodal.is-open{
  visibility:visible;
  opacity:1;
  transition:opacity .3s ease;
}
.pmodal__backdrop{position:absolute;inset:0;background:rgba(10,10,10,0.82);}
.pmodal__panel{
  position:relative;
  background:var(--black);
  color:var(--white);
  border-radius:10px;
  max-width:900px;
  width:100%;
  max-height:88vh;
  overflow:auto;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  transform:scale(.94) translateY(10px);
  transition:transform .3s ease;
}
.pmodal.is-open .pmodal__panel{transform:scale(1) translateY(0);}
.pmodal__close{
  position:absolute;
  top:14px;right:14px;
  width:36px;height:36px;
  border-radius:50%;
  border:0;
  background:rgba(255,255,255,0.12);
  color:var(--white);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  z-index:2;
}
.pmodal__close:hover{background:rgba(255,255,255,0.22);}
.pmodal__img-wrap{background:#2a2a2a;min-height:240px;}
.pmodal__img{width:100%;height:100%;object-fit:cover;display:block;}
.pmodal__content{padding:36px;}
.pmodal__tag{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#9a9a96;}
.pmodal__title{font-size:26px;font-weight:600;letter-spacing:-0.6px;margin:8px 0 10px;}
.pmodal__meta{font-size:13px;color:#9a9a96;margin:0 0 16px;}
.pmodal__meta strong{color:#c4c4c0;font-weight:600;}
.pmodal__desc{font-size:15px;color:#c4c4c0;margin:0 0 16px;}
.pmodal__body p{font-size:14px;line-height:1.7;color:#a9a9a5;margin:0 0 14px;}
.pmodal__link{margin-top:10px;}

@media (max-width:700px){
  .pmodal__panel{grid-template-columns:1fr;}
  .pmodal__img-wrap{min-height:200px;}
}

/* ---------- About / positioning statement ---------- */
/* section--quote: vertically centered, ~800px tall on desktop, its own
   off-white (#EEEDE9) distinct from the #B4B2A8 stone used by the Services
   accordion below it, so the two tan-ish sections don't blend into one —
   scoped to this section only, so the quote reads as its own deliberate
   beat on the page. The photo is a transparent PNG cut out tight to the
   subject (no background to crop around), so it's scaled with
   object-fit:contain rather than cropped — it'll scale proportionally with
   the section at any width. */
.section--quote{
  position:relative;
  min-height:800px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#eeede9;
}
.about{
  position:relative;
  z-index:1;
  width:100%;
}
.about__col{max-width:520px;}
.about__mark{width:22px;margin-bottom:24px;}
.about__statement{
  font-size:clamp(24px,3.4vw,38px);
  font-weight:600;
  letter-spacing:-1px;
  line-height:1.2;
  max-width:26ch;
  margin:0 0 30px;
}
.about__photo{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:45%;
}
.about__photo img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:right center;
  display:block;
}

@media (max-width:820px){
  .section--quote{min-height:auto;display:block;}
  .about__col{max-width:none;}
  .about__photo{
    position:static;
    width:100%;
    height:260px;
    margin:32px -20px 0;
  }
}

/* ---------- Services accordion (home page) ---------- */
/* Light variant of the services.html accordion, dropped onto its own
   section--stone (#B4B2A8) block. script.js's #accordion click handler is
   page-agnostic (queries getElementById('accordion') and delegates clicks),
   so the exact same expand/collapse + rotating-icon behaviour works here
   with zero JS changes — only the visual theme differs via this
   accordion--light modifier: dark ink text/icon instead of white/inverted,
   and a single-column panel body since there's no image yet. */
.accordion--light{border-top-color:rgba(45,45,45,0.15);}
.accordion--light .accordion__item{border-bottom-color:rgba(45,45,45,0.15);}
.accordion--light .accordion__head{color:var(--ink);}
.accordion--light .accordion__icon{filter:none;opacity:.45;}
.accordion--light .accordion__item.is-open .accordion__icon{opacity:1;}
.accordion--light .accordion__panel-inner{grid-template-columns:1fr;max-width:640px;padding-bottom:30px;}
.accordion--light .accordion__panel-inner p{color:#4a4a46;margin:0;}

/* ---------- Clients ---------- */
.clients__intro{
  max-width:520px;
  font-size:16px;
  line-height:1.6;
  color:#a9a9a5;
  margin-bottom:40px;
}
.logo-wall{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:var(--gap);
}
.logo-wall__item{
  background:#0d0d0d;
  border-radius:8px;
  aspect-ratio:216/105;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  overflow:hidden;
  transition:background-color .2s ease;
}
.logo-wall__item:hover{background:#1c1c1c;}
/* brightness(0) first flattens every logo (whatever its original dark
   shade) to solid black. From there, invert(17.65%) lands on exactly
   #2d2d2d (same trick used on the nav social icons elsewhere in this
   file) for the resting state, and invert(1) on hover flips it to
   solid white — more reliable than invert(1) alone across 40+ source
   files that aren't all exactly the same colour. scale(1.5) enlarges
   the logo 50% within its already-fitted contain box at rest; hover
   pushes it up another 25% on top of that (scale(1.875) overall) for a
   subtle zoom-in as the card itself lightens — overflow:hidden on the
   card clips both states cleanly at the rounded corners. */
.logo-wall__item img{
  max-height:100%;
  max-width:100%;
  object-fit:contain;
  filter:brightness(0) invert(17.65%);
  transform:scale(1.5);
  transition:filter .2s ease, transform .2s ease;
}
.logo-wall__item:hover img{filter:brightness(0) invert(1);transform:scale(1.875);}

/* Column count steps down by one per breakpoint from 8 (wide desktop)
   down through tablet, then settles at a fixed 2 for mobile. */
@media (max-width:1900px){.logo-wall{grid-template-columns:repeat(7,1fr);}}
@media (max-width:1600px){.logo-wall{grid-template-columns:repeat(6,1fr);}}
@media (max-width:1300px){.logo-wall{grid-template-columns:repeat(5,1fr);}}
@media (max-width:1000px){.logo-wall{grid-template-columns:repeat(4,1fr);}}
@media (max-width:820px){.logo-wall{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.logo-wall{grid-template-columns:repeat(2,1fr);}}

/* ---------- Footer ---------- */
.footer{
  background:var(--ink);
  color:var(--white);
  padding:70px 0 30px;
}
.footer__mark{width:52px;margin-bottom:50px;}
.footer__grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:40px;
  max-width:560px;
}
.footer__col a{
  display:block;
  font-size:15px;
  line-height:2;
  opacity:0.75;
}
.footer__col a:hover{opacity:1;text-decoration:underline;}
.footer__heading{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:1px;
  opacity:0.5;
  margin:0 0 14px;
}
.footer__social{display:flex;gap:16px;margin-top:50px;}
.footer__social img{width:18px;filter:invert(1);opacity:.8;}
.footer__bottom{
  margin-top:30px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,0.15);
  font-size:13px;
  opacity:0.5;
}

@media (max-width:820px){
  .footer__grid{grid-template-columns:1fr 1fr;max-width:none;}
}

/* ---------- Projects listing page ---------- */
.page-head{padding:60px 20px 60px;}
.page-head__grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;}
.page-head__copy{max-width:40ch;font-size:15px;line-height:1.7;color:#5a5a56;}
.page-head__title{text-align:right;font-size:clamp(28px,4vw,46px);font-weight:600;letter-spacing:-1px;margin:0;}

/* Category words double as this page's filter control (same idea as the home
   page's .hero-filter words) — default ink, hover/active swaps to the stone
   accent (#B4B2A8) rather than white, since this page sits on a light
   background. Kept as its own class (not .hero-filter) so it doesn't inherit
   that pattern's white hover meant for the dark home hero. */
.list-filter{
  display:inline-block;
  background:none;
  border:0;
  margin:0;
  padding:0;
  font:inherit;
  letter-spacing:inherit;
  color:var(--ink);
  cursor:pointer;
  transition:color .2s ease;
}
.list-filter:hover,
.list-filter.is-active{color:var(--stone);}

/* Compact sticky sub-menu: same filter links, smaller, pinned directly under
   the main nav. Hidden by default; script.js fades it in once the big
   category type above has scrolled out from under the nav, so the filter
   stays reachable without scrolling back to the top. */
.sub-nav{
  position:sticky;
  top:var(--nav-h);
  z-index:40;
  background:var(--paper);
  border-bottom:1px solid rgba(45,45,45,0.12);
  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.sub-nav.is-visible{opacity:1;transform:translateY(0);pointer-events:auto;}
.sub-nav__inner{display:flex;gap:28px;flex-wrap:wrap;padding:16px 20px;}
.list-filter--sm{font-size:14px;font-weight:600;}

.plist{border-top:1px solid rgba(45,45,45,0.15);}
/* Fixed-height row, image always on the right — modelled on the project
   list on oimachi.co's homepage. Row height is fixed at 450px with 10px of
   vertical padding baked into that height (box-sizing:border-box), so the
   image (which stretches to fill the row) sits inset 10px from the
   separator line above and below rather than touching it. */
.prow{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
  height:450px;
  box-sizing:border-box;
  padding:10px 0;
  border-bottom:1px solid rgba(45,45,45,0.15);
}
/* min-height:0 overrides the grid item's default auto min-size, which
   otherwise floors the item at the <img>'s own intrinsic aspect-ratio
   height and blows it out past the row instead of letting stretch clamp
   it to the row's actual height. */
.prow__media{order:2;align-self:stretch;height:100%;min-height:0;overflow:hidden;}
.prow__media img{border-radius:6px;object-fit:cover;width:100%;height:100%;display:block;}
/* Text column stretches to the same full row height as the image (instead of
   being centered as one block) so its own content can be pinned top vs.
   bottom independently: badge/title/copy stay naturally stacked at the top,
   while margin-top:auto on .prow__cats (its last child) pushes just the
   category icon row down to the bottom — level with the image's bottom edge. */
.prow__body{align-self:stretch;height:100%;min-height:0;display:flex;flex-direction:column;}
.prow__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:60px;height:60px;
  border-radius:5px;
  overflow:hidden;
  font-size:18px;
  font-weight:700;
  margin-bottom:18px;
}
/* Uploaded SVG badge mark, shown in place of the badge letter — see
   script.js's prow rendering and pickCoverImage-style badge.icon check.
   100%/contain (not a partial size) so the mark runs to the edges of the
   badge box on whichever axis constrains it, rather than floating with a
   visible margin inside the box. overflow:hidden on .prow__badge (above)
   clips it to the box's rounded corners — without that, the icon's own
   square corners sit on top of and visually cover the box's radius. */
.prow__badge-icon{width:100%;height:100%;object-fit:contain;display:block;}
.prow__title{font-size:26px;font-weight:600;letter-spacing:-0.6px;margin:0 0 14px;}
.prow__desc{font-size:15px;line-height:1.7;color:#5a5a56;margin-bottom:22px;max-width:44em;}
/* .prow__body is a column flex container, so its children stretch to its
   full width by default (flex align-items:stretch) — fine for the badge/
   title/copy blocks, but it also stretched this button to full width
   instead of its set size. align-self:flex-start opts it back out, so it
   sizes to its own content and sits left-aligned above the category icons. */
.prow__body .btn--solid-sm{align-self:flex-start;}
.prow__cats{display:flex;gap:10px;margin-top:auto;}
.prow__cats img{width:30px;height:30px;opacity:.25;transition:opacity .2s ease;}
.prow__cats img.is-cat-active{opacity:1;}

@media (max-width:800px){
  .prow{grid-template-columns:1fr;gap:24px;height:auto;}
  .prow__media{order:0;}
}

/* ---------- Project detail page ---------- */
.project-hero{padding:40px 0 0;}
.back-link{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;margin-bottom:20px;}
.project-layout{display:grid;grid-template-columns:220px 1fr;gap:60px;padding:20px 0 60px;}
.project-cats{border-left:1px solid rgba(45,45,45,0.15);}
.project-cats li{display:flex;align-items:center;gap:10px;padding:12px 0 12px 20px;font-size:15px;color:#9a9a96;border-left:2px solid transparent;margin-left:-1px;}
.project-cats li img{width:18px;height:18px;opacity:.5;}
.project-cats li.is-active{border-left-color:var(--ink);font-weight:600;color:var(--ink);}
.project-cats li.is-active img{opacity:1;}
.project-body h1{font-size:32px;font-weight:600;letter-spacing:-0.8px;margin:0 0 6px;}
.project-body .tag{font-size:13px;letter-spacing:1px;text-transform:uppercase;color:#8a8a86;display:block;}
.project-body .job-label{font-size:14px;color:#8a8a86;margin:4px 0 26px;}
.project-body p{font-size:16px;line-height:1.8;color:#4a4a46;max-width:65ch;margin-bottom:20px;}
.project-body .meta-row{font-size:14px;color:#8a8a86;margin-bottom:10px;}
.project-body .meta-row strong{color:#4a4a46;font-weight:600;}
.project-body .placeholder-note{font-size:13px;color:#b08a3a;background:#fbf3e0;border-radius:6px;padding:10px 14px;display:inline-block;max-width:65ch;}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px;}
.gallery img{border-radius:6px;object-fit:cover;width:100%;aspect-ratio:1/1;}

@media (max-width:820px){
  .project-layout{grid-template-columns:1fr;}
  .project-cats{display:flex;flex-wrap:wrap;border-left:0;border-top:1px solid rgba(45,45,45,0.15);padding-top:10px;}
  .project-cats li{border-left:0;padding:8px 14px;}
  .gallery{grid-template-columns:1fr 1fr;}
}

.project-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:30px 0;
  margin-top:40px;
  border-top:1px solid rgba(45,45,45,0.15);
  font-weight:600;
}
.project-nav__mark{width:24px;}

/* ---------- Services page ---------- */
body.services-page{background:var(--black);color:var(--white);}
.services-hero{padding:80px 0 40px;}
.services-hero h1{font-size:clamp(28px,4.5vw,46px);font-weight:600;letter-spacing:-1px;line-height:1.15;margin:0 0 30px;max-width:16ch;}
.services-hero p{font-size:16px;line-height:1.8;max-width:38em;color:#b9b9b5;}
.services-hero p strong{display:block;color:var(--white);font-weight:600;}
.accordion{border-top:1px solid rgba(255,255,255,0.15);}
.accordion__item{border-bottom:1px solid rgba(255,255,255,0.15);opacity:.4;transition:opacity .2s ease;}
.accordion__item.is-open{opacity:1;}
.accordion__head{
  width:100%;
  background:none;
  border:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 0;
  font-size:clamp(24px,4vw,42px);
  font-weight:700;
  letter-spacing:-1px;
  color:var(--white);
  text-align:left;
}
.accordion__icon{width:26px;height:26px;flex:none;filter:invert(1);transition:transform .2s ease;opacity:.6;}
.accordion__item.is-open .accordion__icon{transform:rotate(45deg);opacity:1;}
.accordion__panel{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
}
.accordion__item.is-open .accordion__panel{max-height:600px;}
.accordion__panel-inner{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:40px;
  padding:0 0 36px;
  align-items:start;
}
.accordion__panel-inner p{font-size:16px;line-height:1.75;color:#c4c4c0;margin:0 0 20px;}
.accordion__panel-inner img{border-radius:6px;width:100%;aspect-ratio:4/3;object-fit:cover;}

.contact-panel{
  margin-top:60px;
  background:#2a2a2a;
  border-radius:10px;
  min-height:220px;
  display:flex;
  align-items:flex-start;
  padding:26px;
}

@media (max-width:800px){
  .accordion__panel-inner{grid-template-columns:1fr;}
}

/* ---------- Utility ---------- */
.mt-40{margin-top:40px;}
.center{text-align:center;}