/* ==========================================================================
   Bethel Mozart — bethelmozart.com
   Layout v5 (Sept 2026): numbered editorial sections, charcoal + light-grey
   bands with a red-orange accent, inline header navigation with a
   Digital Design dropdown (the fullscreen hamburger menu is gone), and
   artwork cards that fill their frame and zoom on hover.

   Light is the default theme. Dark is the alternate.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin:0;padding:0}
ul[class],ol[class]{list-style:none}
img,picture,video{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
::selection{background:var(--color-accent);color:#fff}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root{
  --space-unit:1em;
  --space-xs:calc(.5 * var(--space-unit));
  --space-sm:calc(.75 * var(--space-unit));
  --space-md:calc(1.25 * var(--space-unit));
  --space-lg:calc(2 * var(--space-unit));
  --space-xl:calc(3.25 * var(--space-unit));
  --space-xxl:calc(5.25 * var(--space-unit));

  --text-base-size:1em;
  --body-line-height:1.6;
  --heading-line-height:1.05;

  --ease-in-out:cubic-bezier(.645,.045,.355,1);
  --ease-out:cubic-bezier(.215,.61,.355,1);
  --ease-zoom:cubic-bezier(.22,.61,.36,1);

  --font-heading:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --font-primary:"Manrope","Helvetica Neue",Arial,sans-serif;

  --header-height:100px;          /* mobile: brand row + nav row */
  --gutter:clamp(16px,4.4vw,72px);
  --maxw:1440px;
  --radius:2px;
  --radius-sm:2px;
}
@media (min-width:56rem){
  :root{--header-height:72px}
}
@media (min-width:64rem){
  :root{--space-unit:1.25em;--text-base-size:1.04em}
}

/* --------------------------------------------------------------------------
   3. Colour
   -------------------------------------------------------------------------- */
:root,[data-theme="light"]{
  --color-bg:#F0F0F0;
  --color-bg-alt:#E8E8E8;
  --color-bg-elevated:#FFFFFF;
  --color-mat:#DEDEDE;
  --color-ink:#141414;
  --color-contrast-higher:#141414;
  --color-contrast-high:#2E2E2E;
  --color-contrast-medium:#626262;
  --color-contrast-low:#D2D2D2;
  --color-contrast-lower:#E3E3E3;
  --color-paper:#F0F0F0;
  --color-accent:#DB3A1E;          /* fills: buttons, bars, active rows (white text passes AA) */
  --color-accent-hover:#C4311A;
  --color-accent-text:#B82A12;     /* accent used as text on light grounds (AA) */
  --color-accent-soft:rgba(219,58,30,.12);
  --color-dark:#252525;            /* charcoal bands: header, hero, about, footer */
  --color-dark-2:#1C1C1C;
  --color-on-dark:#F4F4F4;
  --color-on-dark-muted:#A3A3A3;
  --color-on-dark-dim:#7A7A7A;
  --color-on-dark-line:rgba(255,255,255,.12);
  --color-on-dark-accent:#FF6B4F;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05),0 8px 20px -12px rgba(0,0,0,.18);
  --shadow-lift:0 2px 6px rgba(0,0,0,.06),0 30px 50px -28px rgba(0,0,0,.35);
  color-scheme:light;
}
[data-theme="dark"]{
  --color-bg:#111111;
  --color-bg-alt:#171717;
  --color-bg-elevated:#1E1E1E;
  --color-mat:#242424;
  --color-ink:#F2F2F2;
  --color-contrast-higher:#F2F2F2;
  --color-contrast-high:#D6D6D6;
  --color-contrast-medium:#979797;
  --color-contrast-low:#2E2E2E;
  --color-contrast-lower:#202020;
  --color-paper:#111111;
  --color-accent:#DB3A1E;
  --color-accent-hover:#E8492C;
  --color-accent-text:#FF6B4F;
  --color-accent-soft:rgba(255,80,49,.14);
  --color-dark:#0A0A0A;
  --color-dark-2:#070707;
  --color-on-dark:#F4F4F4;
  --color-on-dark-muted:#9C9C9C;
  --color-on-dark-dim:#707070;
  --color-on-dark-line:rgba(255,255,255,.10);
  --color-on-dark-accent:#FF6B4F;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 8px 20px -12px rgba(0,0,0,.7);
  --shadow-lift:0 2px 6px rgba(0,0,0,.4),0 30px 50px -28px rgba(0,0,0,.9);
  color-scheme:dark;
}

/* --------------------------------------------------------------------------
   4. Base
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Inter Tight";
  src:url("../fonts/inter-tight-var.woff2") format("woff2-variations");
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Manrope";
  src:url("../fonts/manrope-var.woff2") format("woff2-variations");
  font-weight:200 800;font-style:normal;font-display:swap;
}

body{
  font-family:var(--font-primary);
  font-size:var(--text-base-size);
  line-height:var(--body-line-height);
  background-color:var(--color-bg);
  color:var(--color-contrast-high);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition:background-color .4s var(--ease-in-out),color .4s var(--ease-in-out);
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  color:var(--color-contrast-higher);
  line-height:var(--heading-line-height);
  font-weight:600;
  letter-spacing:-.025em;
  text-wrap:balance;
}
p{max-width:66ch;text-wrap:pretty}
strong{color:var(--color-contrast-higher);font-weight:650}
em{font-style:normal;color:var(--color-contrast-higher);font-weight:500}

.u-wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.u-narrow{max-width:820px}
.u-mid{max-width:1080px}
.u-dim{color:var(--color-contrast-medium)}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;top:-100px;left:var(--gutter);z-index:1000;background:var(--color-accent);color:#fff;padding:12px 20px;font-weight:650}
.skip-link:focus{top:12px}

.display{
  font-family:var(--font-heading);
  font-weight:600;
  line-height:1.0;
  letter-spacing:-.04em;
  color:var(--color-contrast-higher);
  text-wrap:balance;
}
.display--xl{font-size:clamp(2.6rem,7.4vw,6.4rem);letter-spacing:-.045em}
.display--lg{font-size:clamp(2.1rem,5.2vw,4.4rem)}
.display--md{font-size:clamp(1.75rem,3.6vw,3rem);letter-spacing:-.032em}
.display--sm{font-size:clamp(1.4rem,2.3vw,1.95rem);line-height:1.08;letter-spacing:-.026em}

.display + p,
.display + .cs-head__lede,
.display + .btn-row,
h1 + p, h2 + p, h3 + p{margin-top:clamp(1.1rem,2vw,1.6rem)}
p + .btn-row,
.cs-head__lede + .btn-row{margin-top:clamp(1.8rem,3vw,2.6rem)}
.eyebrow + .display{margin-top:0}

.eyebrow{
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:650;color:var(--color-contrast-medium);
  display:flex;align-items:center;gap:.85em;margin-bottom:1.4em;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--color-accent);flex:none}
.eyebrow a{transition:color .3s ease}
.eyebrow a:hover{color:var(--color-accent-text)}

.section{padding-block:clamp(72px,9vw,150px)}
.section--tight{padding-block:clamp(48px,6vw,96px)}

/* --------------------------------------------------------------------------
   5. Page transition
   -------------------------------------------------------------------------- */
#loaded{
  position:fixed;inset:0;width:100%;height:100vh;z-index:9999;
  background-color:var(--color-dark);opacity:1;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .8s cubic-bezier(.25,.46,.45,.94);
}
#loaded.is-out{opacity:0}
#loaded.is-leaving{opacity:1;transition:opacity .3s cubic-bezier(.77,0,.175,1)}
#loaded.is-done{display:none}
.loader-dots{display:flex;gap:5px}
.loader-dots span{
  width:11px;height:11px;border-radius:50%;background:var(--color-accent);
  animation:dotPulse 1.2s var(--ease-in-out) infinite;
}
.loader-dots span:nth-child(2){animation-delay:.15s}
.loader-dots span:nth-child(3){animation-delay:.3s}
@keyframes dotPulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

/* --------------------------------------------------------------------------
   6. Header — brand, inline navigation, theme toggle, contact button
   -------------------------------------------------------------------------- */
.main-header{position:fixed;top:0;left:0;right:0;z-index:50;color:var(--color-on-dark)}
.main-header__layout{
  position:relative;background:var(--color-dark);
  border-bottom:1px solid var(--color-on-dark-line);
  transition:transform .45s var(--ease-in-out),box-shadow .3s ease;
}
body[data-menu="sticky"] .main-header__layout.is-hide{transform:translateY(-105%)}
.main-header.show-bg .main-header__layout{box-shadow:0 10px 30px -18px rgba(0,0,0,.6)}

.main-header__inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  column-gap:clamp(12px,2vw,28px);min-height:var(--header-height);
}
.header-brand{display:flex;align-items:center;gap:clamp(14px,1.6vw,26px);height:56px;min-width:0}
.ms-logo{display:flex;align-items:center;gap:10px;color:var(--color-on-dark);flex:none}
.ms-logo svg{height:11px;width:auto;display:block;color:var(--color-accent)}
.ms-logo__word{font-family:var(--font-heading);font-weight:650;font-size:1rem;letter-spacing:-.02em;white-space:nowrap}
.ms-logo:hover .ms-logo__word{color:#fff}
.header-email{font-size:.8rem;color:var(--color-on-dark-accent);white-space:nowrap;display:none;transition:color .3s ease}
.header-email:hover{color:#fff}
@media (min-width:72rem){.header-email{display:inline}}

/* primary nav */
.site-nav{order:3;width:100%;border-top:1px solid var(--color-on-dark-line)}
.site-nav__list{display:flex;align-items:center;justify-content:flex-start;height:44px;gap:clamp(20px,6vw,32px)}
.site-nav__list > li{position:relative;display:flex;align-items:center;height:100%}
.site-nav__link{
  display:inline-flex;align-items:center;gap:6px;height:100%;
  font-family:var(--font-primary);font-size:.86rem;font-weight:800;letter-spacing:.01em;
  color:var(--color-on-dark);white-space:nowrap;position:relative;
  transition:color .25s ease;
}
.site-nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--color-accent);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-in-out);
}
.site-nav__link:hover,.site-nav__link[aria-expanded="true"]{color:#fff}
.site-nav__link:hover::after,.site-nav__link.is-active::after,.site-nav__link[aria-expanded="true"]::after{transform:scaleX(1)}
.site-nav__link.is-active{color:#fff}
.site-nav__chev{width:10px;height:10px;flex:none;transition:transform .3s var(--ease-in-out)}
.site-nav__link[aria-expanded="true"] .site-nav__chev{transform:rotate(180deg)}

.site-nav__dd{
  position:absolute;top:100%;left:50%;z-index:5;
  width:min(300px,calc(100vw - 32px));
  background:var(--color-dark-2);border:1px solid var(--color-on-dark-line);border-top:2px solid var(--color-accent);
  box-shadow:0 24px 50px -20px rgba(0,0,0,.7);
  padding:8px;display:grid;gap:2px;
  opacity:0;visibility:hidden;transform:translate(-50%,8px);
  transition:opacity .25s ease,transform .3s var(--ease-out),visibility .25s;
}
.has-dd.is-open .site-nav__dd{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media (hover:hover) and (min-width:56rem){
  .has-dd:hover .site-nav__dd{opacity:1;visibility:visible;transform:translate(-50%,0)}
  .has-dd:hover .site-nav__chev{transform:rotate(180deg)}
  .has-dd:hover > .site-nav__link::after{transform:scaleX(1)}
}
.site-nav__dd a{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 14px;
  padding:14px 14px;color:var(--color-on-dark);transition:background-color .25s ease,color .25s ease;
}
.site-nav__dd a:hover,.site-nav__dd a:focus-visible,.site-nav__dd a.is-current{background:rgba(255,255,255,.06)}
.site-nav__dd .dd-idx{grid-row:span 2;align-self:start;font-size:.7rem;font-weight:700;color:var(--color-on-dark-accent);padding-top:3px}
.site-nav__dd .dd-title{font-family:var(--font-heading);font-weight:600;font-size:1rem;letter-spacing:0;word-spacing:.04em}
.site-nav__dd .dd-desc{grid-column:2;font-size:.76rem;color:var(--color-on-dark-muted);line-height:1.4}
.site-nav__dd .dd-arrow{grid-row:1 / span 2;grid-column:3;width:14px;height:14px;color:var(--color-on-dark-muted);transition:transform .3s var(--ease-out),color .3s ease}
.site-nav__dd a:hover .dd-arrow{transform:translate(3px,-3px);color:var(--color-accent)}

/* first nav item's dropdown should not spill off-screen on phones */
@media (max-width:55.99rem){
  .site-nav__dd{left:0;transform:translate(0,8px)}
  .has-dd.is-open .site-nav__dd{transform:translate(0,0)}
}

@media (min-width:56rem){
  .main-header__inner{flex-wrap:nowrap}
  .header-brand{height:var(--header-height)}
  .site-nav{order:0;width:auto;border-top:0;margin-left:auto;height:var(--header-height)}
  .site-nav__list{height:100%;justify-content:flex-end;gap:clamp(22px,2.6vw,40px)}
  .site-nav__link{font-size:.95rem}
  .site-nav__dd{left:0;transform:translate(0,8px)}
  .has-dd.is-open .site-nav__dd{transform:translate(0,0)}
}
@media (hover:hover) and (min-width:56rem){
  .has-dd:hover .site-nav__dd{transform:translate(0,0)}
}

.header-actions{display:flex;align-items:center;gap:10px;height:56px}
@media (min-width:56rem){.header-actions{height:var(--header-height)}}

.theme-toggle{display:flex;align-items:center;border:1px solid var(--color-on-dark-line);padding:3px;gap:2px}
.theme-toggle button{width:28px;height:26px;display:grid;place-items:center;color:var(--color-on-dark-muted);transition:background-color .3s ease,color .3s ease}
.theme-toggle button svg{width:14px;height:14px}
.theme-toggle button:hover{color:#fff}
.theme-toggle button.toggler--is-active{background:var(--color-on-dark);color:var(--color-dark)}

.header-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px;
  background:var(--color-accent);color:#fff;font-weight:650;font-size:.84rem;white-space:nowrap;
  transition:background-color .3s ease;
}
.header-cta svg{width:12px;height:12px;transition:transform .3s var(--ease-out)}
.header-cta:hover{background:var(--color-accent-hover)}
.header-cta:hover svg{transform:translate(2px,-2px)}
@media (max-width:23rem){.header-cta span{display:none}.header-cta{width:36px;padding:0}}

/* --------------------------------------------------------------------------
   7. Buttons & links
   -------------------------------------------------------------------------- */
.ms-btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--font-primary);font-weight:650;font-size:.92rem;letter-spacing:.005em;
  padding:15px 26px;border-radius:var(--radius);position:relative;border:1px solid transparent;
  transition:background-color .3s var(--ease-in-out),color .3s var(--ease-in-out),border-color .3s var(--ease-in-out);
}
.ms-btn svg{width:13px;height:13px;flex:none;transition:transform .35s var(--ease-out)}
.ms-btn:hover svg{transform:translate(3px,-3px)}
.ms-btn--primary{background:var(--color-accent);color:#fff}
.ms-btn--primary:hover{background:var(--color-accent-hover)}
.ms-btn--ghost{border-color:var(--color-contrast-higher);color:var(--color-contrast-higher)}
.ms-btn--ghost:hover{background:var(--color-contrast-higher);color:var(--color-paper)}
.ms-btn--light{border-color:rgba(255,255,255,.5);color:var(--color-on-dark)}
.ms-btn--light:hover{background:var(--color-on-dark);color:var(--color-dark);border-color:var(--color-on-dark)}
.ms-btn--sm{padding:11px 20px;font-size:.85rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

.link-underline{position:relative;color:var(--color-contrast-higher);font-weight:650;display:inline-flex;align-items:center;gap:.5em}
.link-underline svg{width:12px;height:12px;flex:none}
.link-underline::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:100%;background:var(--color-accent);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-in-out)}
.link-underline:hover::after{transform:scaleX(1);transform-origin:left}

.link-accent{display:inline-flex;align-items:center;gap:.45em;color:var(--color-accent-text);font-weight:650;font-size:.95rem}
.link-accent svg{width:12px;height:12px;transition:transform .35s var(--ease-out)}
.link-accent:hover svg{transform:translate(3px,-3px)}
.link-accent:hover{text-decoration:underline;text-underline-offset:4px}

/* --------------------------------------------------------------------------
   8. Homepage — numbered sections
   -------------------------------------------------------------------------- */
.hs{padding-block:clamp(72px,9vw,140px);position:relative}
.hs--alt{background:var(--color-bg-alt)}
.hs--white{background:var(--color-bg-elevated)}
.hs--dark{background:var(--color-dark);color:var(--color-on-dark-muted)}
.hs--dark h1,.hs--dark h2,.hs--dark h3,.hs--dark strong{color:var(--color-on-dark)}

.hs__grid{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:56rem){.hs__grid{grid-template-columns:clamp(56px,7vw,110px) minmax(0,1fr);gap:0}}
.hs__idx{font-family:var(--font-heading);font-size:.95rem;font-weight:600;color:var(--color-accent-text);letter-spacing:-.01em;padding-top:.5em}
.hs--dark .hs__idx{color:var(--color-on-dark-accent)}
.hs__title{font-family:var(--font-heading);font-size:clamp(2.7rem,6.6vw,5.6rem);font-weight:600;letter-spacing:-.05em;line-height:.95}
.hs__sub{margin-top:clamp(12px,1.4vw,20px);font-size:.95rem;color:var(--color-contrast-medium);max-width:46ch}
.hs__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 32px;margin-bottom:clamp(36px,4.6vw,64px)}

/* 00 — hero */
.home-hero{
  background:var(--color-dark);color:var(--color-on-dark-muted);
  padding-top:calc(var(--header-height) + clamp(48px,7vw,110px));
  padding-bottom:clamp(28px,3vw,44px);
}
.home-hero__top{display:grid;grid-template-columns:1fr;gap:28px;align-items:start}
@media (min-width:56rem){.home-hero__top{grid-template-columns:clamp(56px,7vw,110px) minmax(0,1fr) auto;gap:0 32px}}
.home-hero__name{
  font-family:var(--font-heading);font-weight:600;color:var(--color-on-dark);
  font-size:clamp(4.4rem,24vw,7.5rem);line-height:.84;letter-spacing:-.06em;
  margin-left:-.04em;
}
@media (min-width:56rem){.home-hero__name{font-size:clamp(6rem,15vw,13.5rem)}}
.home-hero__name span{display:block}
.home-hero__role{margin-top:clamp(20px,2.4vw,34px);font-size:clamp(1rem,1.4vw,1.2rem);color:var(--color-on-dark);max-width:40ch;line-height:1.45}
.home-hero__role em{color:var(--color-on-dark-muted)}
.home-hero__aside{display:flex;flex-direction:row;flex-wrap:wrap;gap:20px 28px;align-items:flex-start;justify-content:space-between}
@media (min-width:56rem){.home-hero__aside{flex-direction:column;align-items:flex-end;justify-content:flex-start;padding-top:.8em;min-width:170px}}
.home-hero__links{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.86rem}
@media (min-width:56rem){.home-hero__links{flex-direction:column;align-items:flex-end;gap:6px}}
.home-hero__links a{color:var(--color-on-dark-muted);transition:color .25s ease;display:inline-flex;align-items:center;gap:6px}
.home-hero__links a:hover{color:var(--color-on-dark)}
.home-hero__links svg{width:10px;height:10px;opacity:.6}
.badge-avail{
  display:inline-flex;align-items:center;gap:8px;padding:8px 12px;
  background:var(--color-on-dark);color:var(--color-dark);font-size:.74rem;font-weight:700;white-space:nowrap;
}
.badge-avail i{width:8px;height:8px;border-radius:50%;background:#1FBF5B;box-shadow:0 0 0 3px rgba(31,191,91,.22);animation:availPulse 2.4s ease-in-out infinite}
@keyframes availPulse{50%{box-shadow:0 0 0 6px rgba(31,191,91,0)}}

.home-hero__meta{
  display:grid;grid-template-columns:1fr;gap:10px;
  margin-top:clamp(44px,6vw,96px);padding-block:18px;
  border-top:1px solid var(--color-on-dark-line);border-bottom:1px solid var(--color-on-dark-line);
  font-size:.86rem;
}
@media (min-width:40rem){.home-hero__meta{grid-template-columns:1fr auto 1fr;align-items:center}}
.home-hero__meta > :nth-child(2){display:flex;align-items:center;gap:8px}
@media (min-width:40rem){.home-hero__meta > :nth-child(3){text-align:right}}
.home-hero__meta b{color:var(--color-on-dark);font-weight:700}
.home-hero__meta .dot{width:7px;height:7px;background:var(--color-accent);border-radius:50%;flex:none}
.home-hero__meta a{color:var(--color-on-dark);transition:color .25s ease}
.home-hero__meta a:hover{color:var(--color-on-dark-accent)}

/* client names — continuous marquee */
.brand-marquee{
  margin-top:clamp(22px,2.6vw,34px);overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
}
.brand-marquee__track{display:flex;width:max-content}
.brand-strip{
  display:flex;flex:none;align-items:center;flex-wrap:nowrap;
  gap:clamp(40px,5vw,84px);padding-right:clamp(40px,5vw,84px);
  animation:brandMarquee 38s linear infinite;
}
.brand-marquee:hover .brand-strip,
.brand-marquee.is-paused .brand-strip{animation-play-state:paused}
@keyframes brandMarquee{to{transform:translateX(-100%)}}
.brand-strip li{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-heading);font-weight:600;font-size:clamp(.95rem,1.25vw,1.12rem);letter-spacing:-.015em;color:var(--color-on-dark-muted);transition:color .3s ease;white-space:nowrap}
.brand-strip li::before{content:"";width:12px;height:12px;border:2px solid currentColor;border-radius:3px;transform:rotate(45deg);opacity:.7;flex:none}
.brand-strip li:hover{color:var(--color-on-dark)}
.brand-strip__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;margin-top:16px}
.brand-strip__note{font-size:.72rem;color:var(--color-on-dark-muted);opacity:.8;max-width:none}
.marquee-toggle{font-size:.72rem;font-weight:650;color:var(--color-on-dark-muted);padding:4px 0;border-bottom:1px solid var(--color-on-dark-line);transition:color .25s ease,border-color .25s ease}
.marquee-toggle:hover{color:var(--color-on-dark);border-color:var(--color-on-dark)}
/* logo version of the strip */
.brand-strip--logos{gap:clamp(44px,5.4vw,88px);padding-right:clamp(44px,5.4vw,88px);animation-duration:46s}
.brand-strip--logos li{padding-block:6px}
.brand-strip--logos li::before{content:none}
.brand-strip--logos img{height:calc(var(--h) * .82);width:auto;max-width:none;opacity:.74;transition:opacity .35s ease}
.brand-strip--logos li:hover img{opacity:1}
@media (min-width:56rem){.brand-strip--logos img{height:var(--h)}}
.brand-marquee:has(.brand-strip--logos){padding-block:4px}

@media (prefers-reduced-motion:reduce){
  .brand-marquee{-webkit-mask-image:none;mask-image:none}
  .brand-marquee__track{width:auto}
  .brand-strip{animation:none;flex-wrap:wrap;padding-right:0;gap:14px 28px}
  .brand-strip[aria-hidden="true"],.marquee-toggle{display:none}
}

/* 01 — projects */
.proj-grid{display:grid;grid-template-columns:1fr;gap:clamp(32px,3.6vw,52px) clamp(16px,1.8vw,26px)}
@media (min-width:40rem){.proj-grid{grid-template-columns:1fr 1fr}}
.proj-actions{margin-top:clamp(40px,4.6vw,64px)}

/* 02 — services list */
.svc-list{border-top:1px solid var(--color-contrast-low)}
.svc{border-bottom:1px solid var(--color-contrast-low);position:relative;transition:background-color .35s var(--ease-in-out),color .35s var(--ease-in-out)}
.svc__head{
  display:grid;grid-template-columns:clamp(44px,18%,220px) minmax(0,1fr) 28px;align-items:center;gap:12px;
  padding:clamp(16px,1.7vw,22px) clamp(10px,1.2vw,18px);cursor:pointer;
}
.svc__num{font-size:.85rem;color:var(--color-contrast-medium);font-weight:600}
.svc__title{font-family:var(--font-heading);font-size:clamp(1.05rem,1.6vw,1.3rem);font-weight:600;letter-spacing:-.02em;color:var(--color-contrast-higher)}
.svc__icon{width:22px;height:22px;position:relative;justify-self:end}
.svc__icon::before,.svc__icon::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.6px;background:currentColor;transform:translate(-50%,-50%);transition:transform .35s var(--ease-in-out)}
.svc__icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.svc[open] .svc__icon::after{transform:translate(-50%,-50%) rotate(0deg)}
.svc:not([open]):hover{background:var(--color-bg)}
.svc[open]{background:var(--color-accent);color:#fff}
.svc[open] .svc__num,.svc[open] .svc__title{color:#fff}
.svc__panel{display:grid;grid-template-columns:1fr;gap:14px;padding:0 clamp(10px,1.2vw,18px) clamp(22px,2.6vw,34px)}
@media (min-width:40rem){.svc__panel{grid-template-columns:clamp(44px,18%,220px) minmax(0,1fr);gap:0 12px}.svc__panel > div{grid-column:2}}
.svc__panel p{font-size:.95rem;max-width:48ch;color:rgba(255,255,255,.92)}
.svc__panel ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;list-style:none;padding:0}
.svc__panel li{font-size:.76rem;font-weight:650;padding:5px 10px;border:1px solid rgba(255,255,255,.45);color:#fff}
.svc__links{display:flex;flex-wrap:wrap;gap:6px 26px;margin-top:4px}
.hs--alt .svc:not([open]):hover{background:var(--color-bg-elevated)}
.svc__more{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-weight:700;font-size:.88rem;color:#fff;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:2px}
.svc__more svg{width:11px;height:11px;transition:transform .3s var(--ease-out)}
.svc__more:hover svg{transform:translate(3px,-3px)}
.svc__img{display:none}
@media (min-width:64rem){
  .svc__img{
    display:block;position:absolute;z-index:3;pointer-events:none;
    right:clamp(40px,9%,150px);top:-18px;width:clamp(200px,19vw,290px);aspect-ratio:4/3;overflow:hidden;
    box-shadow:0 30px 60px -24px rgba(0,0,0,.45);
    opacity:0;transform:translateY(14px) rotate(-3deg) scale(.94);
    transition:opacity .4s var(--ease-in-out),transform .55s var(--ease-out);
  }
  .svc__img img{width:100%;height:100%;object-fit:cover}
  .svc[open] .svc__img{opacity:1;transform:translateY(0) rotate(-3deg) scale(1)}
  .svc__panel p{max-width:40ch}
}
.svc-foot{margin-top:clamp(24px,2.8vw,36px)}

/* 03 — process */
.process-grid{display:grid;grid-template-columns:1fr;gap:clamp(14px,1.6vw,22px)}
@media (min-width:40rem){
  .process-grid{grid-template-columns:1fr 1fr;align-items:start}
  .process-grid > :nth-child(even){margin-top:clamp(28px,3.6vw,56px)}
}
.p-step{
  background:var(--color-mat);padding:clamp(22px,2.4vw,34px);min-height:clamp(220px,19vw,280px);
  display:flex;flex-direction:column;gap:6px;
}
.p-step h3{font-size:clamp(1.15rem,1.6vw,1.4rem);letter-spacing:-.025em}
.p-step__tag{font-size:.78rem;color:var(--color-contrast-medium)}
.p-step p{font-size:.9rem;color:var(--color-contrast-high);margin-top:14px;max-width:40ch}
.p-step__icon{margin-top:auto;padding-top:22px;color:var(--color-contrast-medium)}
.p-step__icon svg{width:22px;height:22px}
.process-foot{margin-top:clamp(56px,6vw,90px)}

/* 04 — about */
.about-lead{font-family:var(--font-heading);font-size:clamp(1.7rem,3.4vw,2.9rem);font-weight:600;letter-spacing:-.035em;line-height:1.08;color:var(--color-on-dark);max-width:24ch}
.about-label{font-size:.8rem;color:var(--color-on-dark-muted);margin-bottom:14px}
.about-media{display:grid;grid-template-columns:48px minmax(0,1fr);margin-top:clamp(36px,4.6vw,64px);align-items:start}
@media (min-width:48rem){.about-media{grid-template-columns:56px minmax(0,1.05fr) minmax(0,.95fr)}}
.about-media__bar{background:var(--color-accent);align-self:stretch;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 0}
.about-media__bar a{width:34px;height:34px;display:grid;place-items:center;color:#fff;transition:background-color .25s ease}
.about-media__bar a:hover{background:rgba(0,0,0,.18)}
.about-media__bar svg{width:15px;height:15px}
.about-media__img{overflow:hidden;aspect-ratio:1/1.02;background:var(--color-dark-2)}
.about-media__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-zoom)}
.about-media__img:hover img{transform:scale(1.06)}
.about-media__box{
  grid-column:1 / -1;background:var(--color-accent);color:#fff;padding:clamp(22px,2.4vw,32px);
  font-size:.92rem;line-height:1.55;
}
.about-media__box p{color:#fff;max-width:40ch}
.about-media__box p + p{margin-top:.9em}
.about-media__box .svc__more{margin-top:20px}
@media (min-width:48rem){
  .about-media__box{grid-column:auto;margin-left:-64px;margin-top:clamp(40px,5vw,72px);position:relative;z-index:1;max-width:380px}
}

/* 05 — experience (card slider) */
.xp{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
@media (min-width:48rem){.xp{grid-template-columns:minmax(0,760px) 52px;gap:18px}}
.xp__stage{position:relative;display:grid}
.xp__card{
  grid-area:1 / 1;background:var(--color-bg-elevated);padding:clamp(26px,3vw,44px);
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:clamp(26px,3vw,44px);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .45s var(--ease-in-out),transform .55s var(--ease-out),visibility .45s;
}
.xp__card.is-active{opacity:1;visibility:visible;transform:none}
.xp__text{font-family:var(--font-heading);font-size:clamp(1.15rem,1.9vw,1.55rem);font-weight:600;line-height:1.28;letter-spacing:-.022em;color:var(--color-contrast-higher);max-width:36ch}
.xp__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 24px}
.xp__role{font-weight:700;color:var(--color-contrast-higher);font-size:.95rem}
.xp__org{font-size:.84rem;color:var(--color-contrast-medium)}
.xp__nav{display:flex;gap:6px}
@media (min-width:48rem){.xp__nav{flex-direction:column}}
.xp__nav button{width:52px;height:52px;display:grid;place-items:center;transition:background-color .25s ease,color .25s ease}
.xp__nav svg{width:16px;height:16px}
.xp__next{background:var(--color-accent);color:#fff}
.xp__next:hover{background:var(--color-accent-hover)}
.xp__prev{background:var(--color-bg-elevated);color:var(--color-contrast-higher);box-shadow:var(--shadow-sm)}
.xp__prev:hover{background:var(--color-contrast-higher);color:var(--color-paper)}
.xp__count{font-size:.78rem;color:var(--color-contrast-medium);margin-top:14px;font-variant-numeric:tabular-nums}

/* 06 — ongoing support */
.support-box{background:var(--color-dark);color:var(--color-on-dark-muted);max-width:760px}
.support-box__body{padding:clamp(26px,3vw,44px);display:grid;gap:14px}
.support-box__icon{width:30px;height:30px;color:var(--color-on-dark)}
.support-box__lead{font-size:clamp(1.02rem,1.4vw,1.18rem);font-weight:650;line-height:1.5;color:var(--color-on-dark);max-width:44ch;margin-top:8px}
.support-box__body p{font-size:.9rem;max-width:56ch}
.support-box__list{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.support-box__list li{font-size:.76rem;font-weight:650;padding:5px 10px;border:1px solid var(--color-on-dark-line);color:var(--color-on-dark)}
.support-box__bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--color-accent);color:#fff;font-weight:700;font-size:.95rem;
  padding:18px clamp(26px,3vw,44px);transition:background-color .3s ease;
}
.support-box__bar svg{width:14px;height:14px;transition:transform .35s var(--ease-out)}
.support-box__bar:hover{background:var(--color-accent-hover)}
.support-box__bar:hover svg{transform:translate(3px,-3px)}

/* --------------------------------------------------------------------------
   8b. Inner-page hero (Services, Pricing)
   -------------------------------------------------------------------------- */
.page-hero{
  background:var(--color-dark);color:var(--color-on-dark-muted);
  padding-top:calc(var(--header-height) + clamp(48px,7vw,110px));
  padding-bottom:clamp(44px,5.4vw,80px);
}
.page-hero__grid{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:56rem){.page-hero__grid{grid-template-columns:clamp(56px,7vw,110px) minmax(0,1fr);gap:0}}
.page-hero .hs__idx{color:var(--color-on-dark-accent)}
.page-hero__title{font-family:var(--font-heading);font-weight:600;color:var(--color-on-dark);font-size:clamp(3.4rem,11vw,9.5rem);line-height:.86;letter-spacing:-.06em;margin-left:-.04em}
.page-hero__lede{margin-top:clamp(20px,2.4vw,32px);font-size:clamp(1rem,1.35vw,1.18rem);line-height:1.5;color:var(--color-on-dark);max-width:52ch}
.page-hero__jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(28px,3.4vw,46px)}
.page-hero__jump a{
  display:inline-flex;align-items:center;gap:10px;padding:10px 16px;
  border:1px solid var(--color-on-dark-line);color:var(--color-on-dark);font-size:.86rem;font-weight:650;
  transition:background-color .25s ease,border-color .25s ease,color .25s ease;
}
.page-hero__jump a span{font-size:.72rem;color:var(--color-on-dark-accent);font-weight:700}
.page-hero__jump a em{font-style:normal;font-weight:500;color:var(--color-on-dark-muted);margin-left:2px}
.page-hero__jump a:hover{background:var(--color-accent);border-color:var(--color-accent)}
.page-hero__jump a:hover span,.page-hero__jump a:hover em{color:#fff}
@media (max-width:39.99rem){
  .page-hero__jump{flex-direction:column;gap:8px}
  .page-hero__jump a{width:100%}
  .page-hero__jump a em{margin-left:auto;white-space:nowrap}
}

.hs__title--md{font-size:clamp(2.2rem,5vw,4.2rem)}
.hs__intro{font-size:.95rem;color:var(--color-contrast-high);max-width:44ch}
@media (min-width:64rem){.hs__intro{text-align:left;align-self:flex-end}}
.pricing-teaser{margin-top:clamp(56px,6vw,90px)}

/* --------------------------------------------------------------------------
   8c. Pricing
   -------------------------------------------------------------------------- */
.price-count{font-size:.9rem;color:var(--color-contrast-medium)}
.price-count strong{color:var(--color-accent-text)}
.price-list{display:grid;gap:clamp(14px,1.6vw,22px)}
.price{
  display:grid;grid-template-columns:1fr;background:var(--color-bg-elevated);
  box-shadow:var(--shadow-sm);scroll-margin-top:calc(var(--header-height) + 20px);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out);
}
.hs--white .price{background:var(--color-bg)}
.price:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
@media (min-width:56rem){.price{grid-template-columns:minmax(260px,.9fr) minmax(0,2fr)}}
.price__main{padding:clamp(24px,2.8vw,40px);display:flex;flex-direction:column;align-items:flex-start;gap:6px;border-bottom:1px solid var(--color-contrast-low)}
@media (min-width:56rem){.price__main{border-bottom:0;border-right:1px solid var(--color-contrast-low)}}
.price__tier{display:flex;align-items:center;gap:10px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--color-contrast-medium)}
.price__tier span{color:var(--color-accent-text);letter-spacing:0}
.price__name{font-family:var(--font-heading);font-size:clamp(1.45rem,2.3vw,2rem);font-weight:600;letter-spacing:-.03em;line-height:1.05;margin-top:6px}
.price__note{font-size:.8rem;color:var(--color-contrast-medium)}
.price__amount{font-family:var(--font-heading);font-size:clamp(1.6rem,2.6vw,2.3rem);font-weight:600;letter-spacing:-.035em;line-height:1.05;color:var(--color-accent-text);margin-top:clamp(16px,2vw,26px);white-space:nowrap}
.price__time{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;color:var(--color-contrast-high);margin-top:6px}
.price__time svg{width:15px;height:15px;color:var(--color-contrast-medium)}
.price__cta{margin-top:auto;justify-content:center}
.price__main .price__cta{margin-top:clamp(20px,2.4vw,32px)}
.price__body{padding:clamp(24px,2.8vw,40px)}
.price__label{display:flex;justify-content:space-between;gap:12px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--color-contrast-medium);margin-bottom:16px;max-width:none}
.price__label span{letter-spacing:.02em;text-transform:none;font-weight:600}
.price__list{display:grid;grid-template-columns:1fr;gap:10px 28px}
@media (min-width:40rem){.price__list--2,.price__list--3{grid-template-columns:1fr 1fr}}
@media (min-width:80rem){.price__list--3{grid-template-columns:1fr 1fr 1fr}}
.price__list li{display:flex;align-items:flex-start;gap:10px;font-size:.93rem;line-height:1.4;color:var(--color-contrast-higher)}
.price__check{width:16px;height:16px;flex:none;margin-top:2px;color:var(--color-accent)}
.price__ideal{margin-top:clamp(22px,2.6vw,32px);padding-top:clamp(18px,2vw,24px);border-top:1px solid var(--color-contrast-low)}
.price__ideal ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0}
.price__ideal li{font-size:.78rem;font-weight:650;padding:6px 11px;border:1px solid var(--color-contrast-low);color:var(--color-contrast-high)}

/* flagship tier: charcoal card */
.price--flagship,.hs--white .price--flagship{background:var(--color-dark);color:var(--color-on-dark-muted)}
.price--flagship .price__main{border-color:var(--color-on-dark-line)}
.price--flagship .price__name{color:var(--color-on-dark)}
.price--flagship .price__amount{color:var(--color-on-dark-accent)}
.price--flagship .price__tier,.price--flagship .price__note,.price--flagship .price__label{color:var(--color-on-dark-muted)}
.price--flagship .price__tier span{color:var(--color-on-dark-accent)}
.price--flagship .price__time{color:var(--color-on-dark)}
.price--flagship .price__time svg{color:var(--color-on-dark-muted)}
.price--flagship .price__list li{color:var(--color-on-dark)}
.price--flagship .price__check{color:var(--color-on-dark-accent)}

.how-grid{display:grid;grid-template-columns:1fr;gap:clamp(14px,1.6vw,22px)}
@media (min-width:56rem){.how-grid{grid-template-columns:repeat(3,1fr)}}
.how-grid .p-step{min-height:0}

/* contact: single phone line with call / WhatsApp actions */
.contact-line--phone > a strong{transition:color .3s ease}
.contact-line--phone > a:hover strong{color:var(--color-accent-text)}
.contact-line__actions{display:flex!important;gap:8px;margin:12px 0 0!important;letter-spacing:0!important;text-transform:none!important}
.contact-line__actions a{font-size:.8rem;font-weight:700;padding:6px 12px;border:1px solid var(--color-contrast-low);color:var(--color-contrast-higher);transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.contact-line__actions a:hover{background:var(--color-accent);border-color:var(--color-accent);color:#fff}
.footer-contact__note{font-size:.8rem;color:var(--color-on-dark-muted);margin-top:-2px}

/* --------------------------------------------------------------------------
   9. Artwork cards — image always fills its frame, zoom on hover
   -------------------------------------------------------------------------- */
.filter-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(32px,4.4vw,56px)}
.filter-nav__item{
  padding:10px 18px;font-size:.85rem;font-weight:650;
  border:1px solid var(--color-contrast-low);color:var(--color-contrast-medium);
  transition:color .3s var(--ease-in-out),border-color .3s var(--ease-in-out),background-color .3s var(--ease-in-out);
}
.filter-nav__item:hover{color:var(--color-contrast-higher);border-color:var(--color-contrast-higher)}
.filter-nav__item.active{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}

.grid-gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(32px,3.6vw,52px) clamp(16px,1.8vw,26px)}
.grid-item-p{grid-column:span 6}
.grid-item-p--wide{grid-column:span 12}
@media (max-width:40rem){.grid-item-p,.grid-item-p--wide{grid-column:span 12}}

.p-card{display:block;position:relative}
.p-card__media{
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:var(--color-mat);aspect-ratio:4/3;
  isolation:isolate;
}
.p-card--wide .p-card__media{aspect-ratio:16/10}
.p-card__media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  transform:scale(1.001);transition:transform .9s var(--ease-zoom);
}
.p-card:hover .p-card__media img,
.p-card:focus-visible .p-card__media img{transform:scale(1.09)}
.p-card__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.38),rgba(0,0,0,.08));opacity:0;transition:opacity .5s var(--ease-in-out);display:grid;place-items:center}
.p-card:hover .p-card__overlay,.p-card:focus-visible .p-card__overlay{opacity:1}
.p-card__cta{
  display:inline-flex;align-items:center;gap:.5em;padding:12px 20px;
  background:#fff;color:#141414;font-weight:650;font-size:.85rem;
  transform:translateY(10px);opacity:0;transition:transform .5s var(--ease-out),opacity .45s var(--ease-in-out);
}
.p-card__cta svg{width:13px;height:13px}
.p-card:hover .p-card__cta,.p-card:focus-visible .p-card__cta{transform:translateY(0);opacity:1}
.p-card__body{display:flex;flex-direction:column;gap:4px;padding-top:14px}
.p-card__title{font-family:var(--font-heading);font-size:clamp(1rem,1.3vw,1.15rem);font-weight:600;letter-spacing:-.02em;color:var(--color-contrast-higher);transition:color .3s ease}
.p-card:hover .p-card__title{color:var(--color-accent-text)}
.p-card__cat{font-size:.8rem;color:var(--color-contrast-medium);display:flex;flex-wrap:wrap;gap:4px 12px}
.p-card__cat span::before{content:"•";margin-right:6px;color:var(--color-contrast-medium)}
.p-card__ext{display:inline-flex;align-items:center;gap:.45em;font-size:.8rem;font-weight:600;color:var(--color-contrast-medium);margin-top:8px;transition:color .3s ease;white-space:nowrap}
.p-card__ext svg{width:11px;height:11px;flex:none}
.p-card__ext:hover{color:var(--color-accent-text)}

/* portfolio list (kept for any page that still uses it) */
.ms-p-list{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:64rem){.ms-p-list{grid-template-columns:1.15fr .85fr;gap:var(--space-xxl)}}
.ms-p-list__items{border-top:1px solid var(--color-contrast-low)}
.ms-p-list__item{display:block;border-bottom:1px solid var(--color-contrast-low);transition:opacity .6s ease}
.ms-p-list__item a{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding-block:clamp(18px,2.4vw,30px)}
.ms-p-list__item .p-list-t{font-family:var(--font-heading);font-size:clamp(1.4rem,3vw,2.4rem);font-weight:600;letter-spacing:-.03em;color:var(--color-contrast-higher)}
.ms-p-list__item .p-list-c{color:var(--color-contrast-medium);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.ms-p-list__aside{display:none}
@media (min-width:64rem){
  .ms-p-list__aside{display:block}
  .ms-p-list__aside-inner{position:sticky;top:14vh;aspect-ratio:4/3;overflow:hidden;background:var(--color-mat)}
  .ms-p-list__img{position:absolute;inset:0;overflow:hidden}
  .ms-p-list__img img{width:100%;height:100%;object-fit:cover;transform:translateY(101%);transition:transform .6s cubic-bezier(1,0,.25,.995)}
  .ms-p-list__img.active img{transform:translateY(0)}
}

/* --------------------------------------------------------------------------
   10. Case study
   -------------------------------------------------------------------------- */
.cs-head{padding-top:calc(var(--header-height) + clamp(56px,8vw,130px));padding-bottom:clamp(36px,4.4vw,64px)}
.cs-head__title{max-width:17ch}
.cs-head__lede{font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--color-contrast-medium);max-width:58ch}
.cs-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--space-md);margin-top:clamp(36px,4.4vw,60px);padding-top:26px;border-top:1px solid var(--color-contrast-low)}
.cs-meta dt{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent-text);font-weight:650;margin-bottom:8px}
.cs-meta dd{font-weight:650;color:var(--color-contrast-higher);font-size:.95rem}

/* hero: the frame hugs the artwork, so there is never an empty or blurred border */
.cs-hero{width:fit-content;max-width:100%;margin-inline:auto;overflow:hidden;border-radius:var(--radius);background:var(--color-mat);box-shadow:var(--shadow-sm)}
.cs-hero img{display:block;width:auto;height:auto;max-width:100%;max-height:min(86vh,1060px);transition:transform 1s var(--ease-zoom)}

.cs-body{display:grid;gap:var(--space-lg)}
@media (min-width:64rem){.cs-body{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:var(--space-xxl);align-items:start}}
.cs-body h2{font-size:clamp(1.45rem,2.4vw,2rem);letter-spacing:-.026em}
.cs-body p+p{margin-top:1.15em}
.cs-body p{color:var(--color-contrast-high);font-size:1.02rem}

.cs-figure{margin-block:clamp(44px,6vw,104px)}
.cs-figure__media{overflow:hidden;border-radius:var(--radius);background:var(--color-mat)}
.cs-figure img{width:100%;height:auto;display:block;transition:transform .9s var(--ease-zoom)}
.cs-figure__media:hover img{transform:scale(1.05)}
.cs-figure figcaption{margin-top:14px;font-size:.82rem;color:var(--color-contrast-medium);letter-spacing:.02em}

/* gallery: natural aspect ratios, every image fills its own tile */
.cs-gallery{columns:2;column-gap:clamp(14px,1.8vw,26px)}
@media (max-width:40rem){.cs-gallery{columns:1}}
.cs-gallery a{display:block;break-inside:avoid;margin-bottom:clamp(14px,1.8vw,26px);border-radius:var(--radius-sm);overflow:hidden;background:var(--color-mat);position:relative}
.cs-gallery img{width:100%;height:auto;display:block;transition:transform .9s var(--ease-zoom)}
.cs-gallery a:hover img,.cs-gallery a:focus-visible img{transform:scale(1.07)}
.cs-gallery a::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,0);transition:background-color .4s ease}
.cs-gallery a:hover::after{background:rgba(0,0,0,.08)}

/* web case studies: desktop capture beside the phone capture */
.cs-devices{display:grid;gap:clamp(18px,2.6vw,34px);align-items:end;margin-block:clamp(44px,6vw,96px)}
@media (min-width:64rem){.cs-devices{grid-template-columns:minmax(0,1fr) minmax(220px,.34fr)}}
.cs-devices__desktop a{display:block;overflow:hidden;border-radius:var(--radius);background:var(--color-mat);box-shadow:var(--shadow-sm)}
.cs-devices__desktop img{width:100%;height:auto;display:block;transition:transform .9s var(--ease-zoom)}
.cs-devices__desktop a:hover img{transform:scale(1.05)}
.cs-devices__phone{max-width:340px;margin-inline:auto;width:100%}
.cs-devices__phone a{
  display:block;position:relative;border-radius:34px;overflow:hidden;
  background:#141414;padding:9px;box-shadow:var(--shadow-lift);
}
.cs-devices__phone span,.cs-devices__phone picture{display:block}
.cs-devices__phone img{width:100%;height:auto;display:block;border-radius:26px;background:var(--color-mat);transition:transform .9s var(--ease-zoom)}
.cs-devices__phone a:hover img{transform:scale(1.04)}
.cs-devices__phone a::after{
  content:"";position:absolute;top:15px;left:50%;transform:translateX(-50%);
  width:76px;height:5px;border-radius:99px;background:rgba(255,255,255,.28);z-index:2;
}
.cs-devices__cap{font-size:.82rem;margin-top:-.5rem;margin-bottom:clamp(30px,4vw,60px);letter-spacing:.02em}

.quote-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(20px,2.6vw,36px)}
.quote{background:var(--color-bg-elevated);padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;gap:1.4em}
.quote blockquote p{font-family:var(--font-heading);font-weight:600;font-size:clamp(1.12rem,1.7vw,1.4rem);line-height:1.3;letter-spacing:-.018em;color:var(--color-contrast-higher);max-width:36ch}
.quote blockquote p::before{content:"\201C"}
.quote blockquote p::after{content:"\201D"}
.quote figcaption{margin-top:auto;display:grid;gap:3px}
.quote__name{font-weight:650;color:var(--color-contrast-higher);font-size:.94rem}
.quote__role{font-size:.84rem;color:var(--color-contrast-medium)}

.cs-outro{border-top:1px solid var(--color-contrast-low);padding-top:clamp(34px,4.4vw,60px);display:flex;flex-wrap:wrap;gap:var(--space-md);align-items:center;justify-content:space-between}
.next-project{display:block;background:var(--color-bg-alt);padding-block:clamp(48px,6.5vw,92px);transition:background-color .4s ease}
.next-project:hover{background:var(--color-mat)}
.next-project__label{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent-text);font-weight:650;margin-bottom:1em}
.next-project__title{font-size:clamp(2rem,5.6vw,4.4rem);transition:transform .6s var(--ease-in-out)}
.next-project:hover .next-project__title{transform:translateX(14px)}

/* --------------------------------------------------------------------------
   11. Services page accordion
   -------------------------------------------------------------------------- */
.offer{border-top:1px solid var(--color-contrast-low);transition:background-color .35s ease}
.offer:last-of-type{border-bottom:1px solid var(--color-contrast-low)}
.offer__head{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-md);padding:clamp(26px,3.4vw,44px) clamp(8px,1vw,16px);text-align:left}
.offer:not([open]):hover{background:var(--color-bg-alt)}
.offer__num{font-size:.8rem;color:var(--color-accent-text);font-weight:700;padding-top:.9em;flex:none;width:48px}
.offer__title{flex:1}
.offer__title h3{font-size:clamp(1.55rem,3.4vw,2.6rem);letter-spacing:-.035em}
.offer__title p{color:var(--color-contrast-medium);margin-top:.6em;font-size:1rem;max-width:52ch}
.offer__icon{flex:none;width:44px;height:44px;border:1px solid var(--color-contrast-low);display:grid;place-items:center;transition:background-color .35s var(--ease-in-out),color .35s var(--ease-in-out),border-color .35s ease}
.offer__icon svg{width:14px;height:14px;transition:transform .35s var(--ease-in-out)}
.offer[open] .offer__icon{background:var(--color-accent);border-color:var(--color-accent);color:#fff}
.offer[open] .offer__icon svg{transform:rotate(45deg)}
.offer__panel{padding:0 clamp(8px,1vw,16px) clamp(30px,3.6vw,56px);display:grid;gap:var(--space-md)}
@media (min-width:64rem){.offer__panel{grid-template-columns:48px 1fr;gap:var(--space-md)}.offer__panel>div:first-child{grid-column:2}}
.offer__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-md) var(--space-lg)}
.offer__list > div{background:var(--color-bg-alt);padding:20px 22px}
.offer__list h4{font-size:1rem;margin-bottom:.45em}
.offer__list p{font-size:.92rem;color:var(--color-contrast-medium)}
details>summary{list-style:none;cursor:pointer}
details>summary::-webkit-details-marker{display:none}

/* --------------------------------------------------------------------------
   12. Cards, logo strip, timeline
   -------------------------------------------------------------------------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(14px,1.6vw,22px)}
.card{background:var(--color-mat);padding:clamp(24px,2.6vw,36px);transition:background-color .35s ease,transform .45s var(--ease-out);display:block}
.card:hover{transform:translateY(-4px)}
.card h3{font-size:1.28rem;margin-bottom:.55em}
.card p{color:var(--color-contrast-medium);font-size:.94rem}
.card__num{font-size:.8rem;color:var(--color-accent-text);font-weight:700;margin-bottom:1.6em;display:block}

.logo-strip{display:flex;flex-wrap:wrap;gap:clamp(26px,4vw,66px);align-items:center}
.logo-strip li{font-family:var(--font-heading);font-size:clamp(.98rem,1.5vw,1.3rem);font-weight:600;letter-spacing:-.014em;color:var(--color-contrast-medium)}

.timeline{border-top:1px solid var(--color-contrast-low)}
.timeline__row{display:grid;gap:8px;padding-block:clamp(24px,2.8vw,38px);border-bottom:1px solid var(--color-contrast-low)}
@media (min-width:48rem){.timeline__row{grid-template-columns:.9fr 1.4fr;gap:var(--space-md);align-items:baseline}}
.timeline__role{font-family:var(--font-heading);font-size:clamp(1.2rem,2.2vw,1.7rem);font-weight:600;letter-spacing:-.026em;color:var(--color-contrast-higher)}
.timeline__org{color:var(--color-contrast-medium);font-size:.95rem}

/* --------------------------------------------------------------------------
   13. Contact + form
   -------------------------------------------------------------------------- */
.contact-grid{display:grid;gap:var(--space-xl)}
@media (min-width:64rem){.contact-grid{grid-template-columns:.8fr 1.2fr;gap:var(--space-xxl);align-items:start}}
.contact-line{display:block;padding-block:18px;border-bottom:1px solid var(--color-contrast-low)}
.contact-line span{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--color-contrast-medium);margin-bottom:8px}
.contact-line strong{font-family:var(--font-heading);font-size:clamp(1.05rem,1.8vw,1.38rem);font-weight:600;letter-spacing:-.022em;color:var(--color-contrast-higher);transition:color .3s ease}
a.contact-line:hover strong{color:var(--color-accent-text)}

.form-grid{display:grid;gap:var(--space-md)}
@media (min-width:48rem){.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}}
.field label{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-contrast-medium);margin-bottom:9px;font-weight:650}
.field input,.field select,.field textarea{
  width:100%;background:var(--color-bg-elevated);border:1px solid var(--color-contrast-low);
  border-radius:var(--radius);padding:15px 17px;color:var(--color-contrast-higher);
  transition:border-color .3s var(--ease-in-out),box-shadow .3s var(--ease-in-out);font-size:.98rem;
}
.field textarea{min-height:160px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--color-accent);outline:none;box-shadow:0 0 0 4px var(--color-accent-soft)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23626262' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 17px center;background-size:12px;padding-right:46px}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:.85rem;color:var(--color-contrast-medium)}
.form-status{padding:15px 17px;font-size:.92rem;display:none}
.form-status.is-ok{display:block;border:1px solid var(--color-accent);background:var(--color-accent-soft);color:var(--color-contrast-higher)}
.form-status.is-err{display:block;border:1px solid #b4453c;color:var(--color-contrast-higher)}

/* CTA band (web design index) */
.cta-band{background:var(--color-bg-alt);padding-block:clamp(64px,8vw,130px)}
.cta-band .u-narrow{max-width:var(--maxw)}
.cta-band h2{max-width:18ch}
.cta-band p{color:var(--color-contrast-medium)}
.cta-band .btn-row{margin-top:2rem}

/* --------------------------------------------------------------------------
   14. Footer — "Let's work together"
   -------------------------------------------------------------------------- */
.site-footer{background:var(--color-dark);color:var(--color-on-dark-muted);padding-block:clamp(72px,9vw,140px) 28px}
.site-footer a{transition:color .25s ease}
.footer-cta{display:grid;gap:clamp(22px,2.6vw,34px)}
.footer-cta__title{
  display:flex;align-items:flex-start;gap:clamp(12px,2vw,30px);
  font-family:var(--font-heading);font-weight:600;letter-spacing:-.055em;line-height:.9;
  font-size:clamp(3rem,9.6vw,8.6rem);color:var(--color-on-dark);
}
.footer-cta__title svg{width:.5em;height:.5em;flex:none;margin-top:.24em;color:var(--color-on-dark-dim)}
.footer-cta__title .dim{color:var(--color-on-dark-dim)}
.footer-cta__title span{display:block}
.footer-cta__text{font-size:.95rem;max-width:48ch}
@media (min-width:56rem){.footer-cta__text,.footer-cta .btn-row{margin-left:clamp(76px,7.4vw,112px)}}
.footer-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:32px 24px;
  margin-top:clamp(64px,8vw,120px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--color-on-dark-line);
}
@media (min-width:56rem){.footer-grid{grid-template-columns:1fr 1fr 1.3fr}}
.footer-grid > :last-child{grid-column:1 / -1}
@media (min-width:56rem){.footer-grid > :last-child{grid-column:auto;justify-self:end;text-align:right}}
.footer-h{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-contrast-medium);font-weight:700;margin-bottom:1.1em}
.site-footer .footer-h{color:var(--color-on-dark-muted)}
.footer-list{display:grid;gap:.55em;font-size:.9rem}
.footer-list a{color:var(--color-on-dark);display:inline-flex;align-items:center;gap:10px}
.footer-list a:hover{color:var(--color-on-dark-accent)}
.footer-list svg{width:14px;height:14px;color:var(--color-on-dark-muted)}
.footer-name{font-family:var(--font-heading);font-size:1.25rem;font-weight:600;letter-spacing:-.02em;color:var(--color-on-dark)}
.footer-tag{font-size:.86rem;margin-top:4px}
.footer-contact{margin-top:18px;display:grid;gap:4px;font-size:.88rem}
.footer-contact a{color:var(--color-on-dark)}
.footer-contact a:hover{color:var(--color-on-dark-accent)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;margin-top:clamp(44px,5vw,72px);padding-top:22px;border-top:1px solid var(--color-on-dark-line);font-size:.8rem;color:var(--color-on-dark-muted)}
.footer-bottom a{color:var(--color-on-dark-muted)}
.footer-bottom a:hover{color:var(--color-on-dark)}

.social-row{display:flex;gap:10px;flex-wrap:wrap}
.social-row a{width:40px;height:40px;border:1px solid var(--color-contrast-low);display:grid;place-items:center;color:var(--color-contrast-medium);transition:border-color .3s ease,color .3s ease,background-color .3s ease}
.social-row a:hover{border-color:var(--color-accent);background:var(--color-accent);color:#fff}
.social-row svg{width:16px;height:16px}

/* --------------------------------------------------------------------------
   15. Scroll reveal
   -------------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
.portfolio_wrap .grid-item-p.reveal{transition-duration:.3s;transition-delay:0s}
.reveal-d1{transition-delay:.08s}
.reveal-d2{transition-delay:.16s}
.reveal-d3{transition-delay:.24s}

/* lightbox */
.lightbox[hidden]{display:none!important}
.lightbox{position:fixed;inset:0;z-index:9998;background:rgba(8,8,9,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,24px);padding:clamp(16px,4vw,56px)}
.lightbox__stage{max-width:min(1400px,92vw);max-height:86vh;display:flex;flex-direction:column;gap:12px}
.lightbox__stage img{max-width:100%;max-height:78vh;width:auto;height:auto;object-fit:contain}
.lightbox__stage figcaption{color:rgba(247,246,243,.55);font-size:.84rem;text-align:center;letter-spacing:.08em}
.lightbox button{color:#F7F6F3;border:1px solid rgba(255,255,255,.2);width:48px;height:48px;font-size:1.5rem;line-height:1;display:grid;place-items:center;flex:none;transition:background-color .3s ease,border-color .3s ease}
.lightbox button:hover{background:var(--color-accent);border-color:var(--color-accent)}
.lightbox__close{position:absolute;top:clamp(14px,3vw,34px);right:clamp(14px,3vw,34px)}
@media (max-width:40rem){.lightbox__prev,.lightbox__next{position:absolute;bottom:clamp(14px,4vw,32px)}.lightbox__prev{left:22%}.lightbox__next{right:22%}}

/* 404 */
.err{min-height:100svh;display:grid;place-items:center;text-align:center;padding-top:var(--header-height)}
.err__code{font-size:clamp(5rem,20vw,15rem);line-height:.86;letter-spacing:-.06em;color:var(--color-accent)}

/* --------------------------------------------------------------------------
   16. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .ms-p-list__img img{transform:none}
  #loaded{display:none}
  .loader-dots span{animation:none;opacity:1}
  .p-card:hover .p-card__media img,.cs-gallery a:hover img,.cs-figure__media:hover img{transform:none}
}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + 12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}