:root{
  --mist:   #EEF0EA;
  --paper:  #F7F6F1;
  --ink:    #1E231F;
  --ink-60: rgba(30,35,31,0.68); /* was 0.62 — 4.32:1 on --mist, fails AA; 0.68 clears 4.5:1 */
  --ink-35: rgba(30,35,31,0.5);  /* was 0.35 — 2.09:1; 0.5 clears the 3:1 large-text floor (still deliberately quieter than ink-60) */
  --moss:   #33513F;
  --moss-dim: #4C6B57;
  --gold:   #7A5A35; /* was #A8824F — 3.06:1 on light backgrounds, fails AA for small text; darkened to clear 4.5:1 */
  --veil:   #DAD5DE;
  --line:   rgba(30,35,31,0.14);
  --glass:  rgba(255,255,255,0.4);
  --glass-edge: rgba(255,255,255,0.65);

  /* iridescent pastel spectrum — ref: holographic surface moodboard */
  --iri-lavender: #D9CFEC;
  --iri-mint:     #CDEADA;
  --iri-gold:     #F1E3C2;
  --iri-rose:     #EFD3DE;
  --iri-sky:      #CFE2ED;

  --radius: 26px;
  --radius-lg: 42px;

  /* EN: Cormorant Garamond + Jost / ZH: Noto Serif TC + Noto Sans TC */
  --display: 'Cormorant Garamond', 'Noto Serif TC', serif;
  --body: 'Jost', 'Noto Sans TC', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
  --space-1: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  --space-2: clamp(1.75rem, 1.5rem + 1.2vw, 3rem);
  --space-3: clamp(3rem, 2.4rem + 2.8vw, 6rem);
  --space-4: clamp(5rem, 3.8rem + 5.5vw, 10rem);
  --max: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

body{
  margin:0;
  background:transparent;
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

/* ---------- LIVING BACKGROUND (whole page) ---------- */
.bg-field{
  position:fixed;
  inset:0;
  z-index:-3;
  overflow:hidden;
  background:var(--mist);
}
.bg-field .blob{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:0.55;
  will-change:transform;
}
.bg-field .b1{ width:52vw; height:52vw; left:-12%; top:-14%; background:var(--iri-lavender); animation:driftA 34s ease-in-out infinite alternate; }
.bg-field .b2{ width:44vw; height:44vw; right:-10%; top:4%;  background:var(--iri-mint);     animation:driftB 40s ease-in-out infinite alternate; }
.bg-field .b3{ width:48vw; height:48vw; left:8%;  bottom:-18%; background:var(--iri-gold);    animation:driftC 30s ease-in-out infinite alternate; }
.bg-field .b4{ width:38vw; height:38vw; right:6%; bottom:-10%; background:var(--iri-rose);    animation:driftA 46s ease-in-out infinite alternate-reverse; }
.bg-field .b5{ width:34vw; height:34vw; left:38%; top:32%;    background:var(--iri-sky);      animation:driftB 38s ease-in-out infinite alternate-reverse; }

@keyframes driftA{
  0%   { transform:translate3d(0,0,0) scale(1); }
  100% { transform:translate3d(6%, 8%, 0) scale(1.12); }
}
@keyframes driftB{
  0%   { transform:translate3d(0,0,0) scale(1.05); }
  100% { transform:translate3d(-8%, 6%, 0) scale(0.94); }
}
@keyframes driftC{
  0%   { transform:translate3d(0,0,0) scale(1); }
  100% { transform:translate3d(5%, -7%, 0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce){
  .bg-field .blob{ animation:none !important; }
}

::selection{ background:var(--moss); color:var(--paper); }

a{ color:inherit; }

:focus-visible{
  outline:2px solid var(--moss);
  outline-offset:3px;
  border-radius:2px;
}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding-left:var(--space-1);
  padding-right:var(--space-1);
}

.eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:rgba(247,246,241,0.92);
  display:inline-flex;
  align-items:center;
  gap:0.6em;
  text-shadow:0 1px 12px rgba(20,22,18,0.4);
}
.eyebrow::before{
  content:'';
  width:0.85em;
  height:1px;
  background:rgba(247,246,241,0.92);
  display:inline-block;
}
/* eyebrow used outside the hero video (e.g. inner pages) reads dark-on-light */
.eyebrow.on-light{
  color:var(--moss);
  text-shadow:none;
}
.eyebrow.on-light::before{ background:var(--moss); }

/* ---------- NAV ---------- */
header{
  position:fixed;
  top:clamp(0.8rem, 1.5vw, 1.4rem);
  left:clamp(0.8rem, 2vw, 1.4rem);
  right:clamp(0.8rem, 2vw, 1.4rem);
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0.4rem 0.2rem;
  gap:var(--space-1);
}
.brandmark{
  font-family:var(--display);
  font-weight:480;
  font-size:1.05rem;
  letter-spacing:0.01em;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:0.55em;
  flex:0 0 auto;
}
.brandmark em{ font-style:italic; color:var(--moss); }
.brandmark img.logo{
  height:30px; width:auto; display:block;
  filter:drop-shadow(0 1px 10px rgba(247,246,241,0.9)) drop-shadow(0 1px 2px rgba(247,246,241,0.9));
}
nav.links{
  display:flex;
  gap:var(--space-2);
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  margin-left:auto;
}
nav.links a{
  text-decoration:none;
  color:var(--ink-60);
  position:relative;
  padding-bottom:2px;
  white-space:nowrap;
  text-shadow:0 1px 10px rgba(247,246,241,0.7);
}
nav.links a::after{
  content:'';
  position:absolute; left:0; right:100%; bottom:0;
  height:1px; background:var(--moss);
  transition:right .35s var(--ease);
}
nav.links a:hover::after, nav.links a:focus-visible::after, nav.links a[aria-current="page"]::after{ right:0; }
nav.links a[aria-current="page"]{ color:var(--ink); }

/* ---------- MOBILE NAV TOGGLE ---------- */
.nav-toggle{
  display:none;
  flex:0 0 auto;
  width:36px; height:36px;
  border:0;
  background:transparent;
  cursor:pointer;
  padding:0;
  position:relative;
  z-index:61;
}
.nav-toggle span{
  position:absolute;
  left:6px; right:6px;
  height:1.5px;
  background:var(--ink);
  filter:drop-shadow(0 1px 6px rgba(247,246,241,0.8));
  transition:transform .35s var(--ease), opacity .35s var(--ease), top .35s var(--ease);
}
.nav-toggle span:nth-child(1){ top:13px; }
.nav-toggle span:nth-child(2){ top:20px; }
.nav-toggle span:nth-child(3){ top:27px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ top:20px; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ top:20px; transform:rotate(-45deg); }

@media (max-width:760px){
  .nav-toggle{ display:block; }
  nav.links{
    display:flex;
    position:fixed;
    inset:0;
    z-index:55;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:1.6rem;
    padding:0 12vw;
    background:var(--mist);
    font-size:1.15rem;
    opacity:0;
    pointer-events:none;
    transform:translateY(-12px);
    transition:opacity .4s var(--ease), transform .4s var(--ease);
  }
  nav.links.is-open{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
  }
  nav.links a{ text-shadow:none; }
}

.lang-toggle{
  display:inline-flex;
  align-items:center;
  font-family:var(--mono);
  font-size:0.68rem;
  letter-spacing:0.08em;
  gap:0.5em;
  flex:0 0 auto;
  text-shadow:0 1px 10px rgba(247,246,241,0.7);
}
.lang-toggle button{
  font:inherit;
  border:0;
  background:transparent;
  color:var(--ink-35);
  padding:0.3em 0.2em;
  cursor:pointer;
  letter-spacing:0.08em;
  text-shadow:inherit;
  border-bottom:1px solid transparent;
}
.lang-toggle button[aria-pressed="true"]{
  color:var(--moss);
  border-bottom-color:var(--moss);
}

/* ---------- HERO / VIDEO ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  isolation:isolate;
}

.grain{
  position:absolute; inset:0; z-index:-1;
  opacity:0.05; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-inner{
  position:relative;
  padding-top:clamp(6rem, 8vh, 9rem);
  padding-bottom:var(--space-3);
}

/* cursor-following light — a soft glow that brightens text as it's "found" by the visitor's own attention */
.title-glow{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(90px circle at var(--mx, 50%) var(--my, 40%), rgba(255,255,255,0.5), rgba(255,255,255,0.1) 45%, transparent 70%);
  mix-blend-mode:overlay;
  opacity:0;
  transition:opacity .5s var(--ease);
  z-index:1;
}
.title-glow.is-active{ opacity:1; }
@media (prefers-reduced-motion: reduce), (hover:none){
  .title-glow{ display:none; }
}

.kicker{ margin-bottom:var(--space-1); }

h1.title{
  font-family:var(--display);
  font-weight:400;
  font-style:normal;
  font-size:clamp(2.2rem, 1.7rem + 3.2vw, 4.6rem);
  line-height:1.12;
  letter-spacing:-0.01em;
  margin:0 0 0.5em;
  max-width:16ch;
  color:#F7F6F1;
  text-shadow:
    0 1px 3px rgba(15,17,14,0.55),
    0 3px 14px rgba(15,17,14,0.5),
    0 10px 34px rgba(15,17,14,0.4);
}
.subhead{
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.05rem, 0.95rem + 0.6vw, 1.35rem);
  color:#F7F6F1;
  max-width:34ch;
  margin:0 0 var(--space-2);
  text-shadow:
    0 1px 3px rgba(15,17,14,0.55),
    0 3px 14px rgba(15,17,14,0.5),
    0 10px 34px rgba(15,17,14,0.4);
}
h1.title .role{
  display:block;
  font-family:var(--mono);
  font-size:clamp(0.85rem, 0.7rem + 0.5vw, 1.05rem);
  font-weight:400;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--iri-gold);
  margin-bottom:0.6em;
  text-shadow:none;
}
h1.title em{
  font-style:italic;
  font-weight:400;
  color:var(--iri-gold);
}
/* the eyebrow above already states this in English once toggled — avoid repeating it */
html[lang="en"] h1.title .role{ display:none; }

.tagline{
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  color:rgba(247,246,241,0.82);
  max-width:34ch;
  margin:0 0 var(--space-2);
  text-shadow:0 2px 20px rgba(20,22,18,0.35);
}

.scrollcue{
  display:inline-flex;
  align-items:center;
  gap:0.8rem;
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(247,246,241,0.65);
}
.scrollcue .stem{
  width:1px; height:34px;
  background:linear-gradient(rgba(247,246,241,0.65), transparent);
  position:relative;
  overflow:hidden;
}
.scrollcue .stem::after{
  content:'';
  position:absolute; left:0; top:-100%;
  width:100%; height:100%;
  background:var(--iri-gold);
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{
  0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; }
}

.hero-video-wrap{
  position:absolute;
  inset:0;
  z-index:-3;
  overflow:hidden;
}
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero-veil{
  position:absolute;
  inset:0;
  background:linear-gradient(100deg, rgba(20,22,18,0.42) 0%, rgba(20,22,18,0.16) 32%, transparent 56%);
}

/* ---------- REVEAL ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-stagger > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* ---------- RESPONSE STREAM (character-by-character reveal) ---------- */
[data-stream] .sw{
  display:inline-block;
  opacity:0;
  transform:translateY(10px);
  filter:blur(3px);
  transition:opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease);
}
[data-stream].in .sw{ opacity:1; transform:translateY(0); filter:blur(0); }

/* ---------- SECTION SCAFFOLD ---------- */
section{ position:relative; padding:var(--space-4) 0; scroll-margin-top:6.5rem; }
.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--space-2);
  margin-bottom:var(--space-3);
  border-bottom:1px solid var(--line);
  padding-bottom:var(--space-1);
}
.section-head h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.6rem, 1.4rem + 1.4vw, 2.6rem);
  margin:0;
}
.section-head .num{
  font-family:var(--mono);
  font-size:0.75rem;
  color:var(--ink-35);
  letter-spacing:0.1em;
}

/* ---------- PAGE HEADER (inner pages) ---------- */
.page-hero{
  padding:clamp(9rem, 14vh, 12rem) 0 var(--space-3);
}
.page-hero h1{
  font-family:var(--display);
  font-weight:400;
  font-style:italic;
  font-size:clamp(2rem, 1.6rem + 3vw, 3.6rem);
  margin:0.5em 0 0;
  color:var(--ink);
}
.page-hero .en-title{
  display:block;
  font-family:var(--mono);
  font-size:clamp(0.75rem, 0.6rem+0.6vw, 1rem);
  font-style:normal;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold);
  margin-top:0.5em;
}

/* ---------- ABOUT ---------- */
.about-grid{
  display:grid;
  grid-template-columns:1.1fr 1.4fr;
  gap:var(--space-3);
  align-items:start;
}
@media (max-width:860px){
  .about-grid{ grid-template-columns:1fr; }
}
.pull{
  font-family:var(--display);
  font-weight:340;
  font-style:italic;
  font-size:clamp(1.4rem, 1.2rem + 1.2vw, 2rem);
  line-height:1.32;
  color:var(--moss);
  margin:0;
}
.about-lead{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.portrait{
  width:min(78%, 320px);
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:48% 52% 58% 42% / 46% 42% 58% 54%;
  animation:blobmorph 16s ease-in-out infinite;
  box-shadow:0 30px 60px -32px rgba(30,35,31,0.35);
}
.portrait img{
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(0.92);
}
@keyframes blobmorph{
  0%, 100%{ border-radius:48% 52% 58% 42% / 46% 42% 58% 54%; }
  50%{ border-radius:58% 42% 46% 54% / 54% 58% 42% 46%; }
}
@media (prefers-reduced-motion: reduce){
  .portrait{ animation:none; }
}
.about-body p{
  font-size:1.02rem;
  color:var(--ink-60);
  max-width:60ch;
  margin:0 0 var(--space-2);
}

.dials{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--space-2);
  margin-top:var(--space-2);
}
@media (max-width:560px){ .dials{ grid-template-columns:1fr; } }
.dial{
  border-top:1px solid var(--line);
  padding:1.4rem 0 0;
}
.dial .reading{
  font-family:var(--mono);
  font-size:0.68rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--gold);
  display:block;
  margin-bottom:0.5rem;
}
.dial .value{
  font-family:var(--display);
  font-size:1.5rem;
  font-weight:480;
  display:block;
  margin-bottom:0.3rem;
}
.dial .label{
  font-size:0.85rem;
  color:var(--ink-60);
  line-height:1.45;
}

/* ---------- PRACTICE / GLASS CARDS ---------- */
.practice{
  background:
    radial-gradient(70% 90% at 85% 10%, rgba(51,81,63,0.10), transparent 60%),
    radial-gradient(60% 70% at 10% 90%, rgba(168,130,79,0.10), transparent 60%);
}
.cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--space-2);
}
@media (max-width:900px){ .cards{ grid-template-columns:1fr; } }
.card{
  border-top:1px solid var(--line);
  padding:1.6rem 0 0;
  transition:transform .5s var(--ease);
}
.card:hover{
  transform:translateY(-4px);
}
.card:hover .mark{
  transform:scale(1.08);
}
.card .mark{
  width:34px; height:34px;
  margin-bottom:1.6rem;
  transition:transform .5s var(--ease);
}
.card h3{
  font-family:var(--display);
  font-weight:480;
  font-size:1.28rem;
  margin:0 0 0.7rem;
}
.card p{
  font-size:0.92rem;
  color:var(--ink-60);
  margin:0;
}
.card .en{
  display:block;
  font-family:var(--mono);
  font-size:0.66rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-35);
  margin-top:1.2rem;
}
html[lang="en"] .card .en{ display:none; }

/* ---------- WORK / PROJECT LIST (4 independent vertical accordions) ---------- */
.proj-list{
  display:flex;
  flex-direction:column;
  width:100%;
  gap:var(--space-2);
  margin-bottom:var(--space-3);
}
.proj{
  width:100%;
}
.proj-copy{ display:none; }
.proj-desc-scope{
  display:block;
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 0.6em;
}
.proj-desc{
  font-size:1.02rem;
  color:var(--ink-60);
  max-width:32ch;
  margin:0;
}
/* only the active (expanded) project shows its text, sitting beside the photo
   rather than stacked under it; sides alternate project-to-project so the
   page doesn't read as four identical stacked bars */
.proj.is-active{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  flex-direction:row-reverse; /* 1st & 3rd project: text left, photo right */
}
.proj:nth-child(even).is-active{ flex-direction:row; } /* 2nd & 4th project: text right, photo left */
.proj.is-active .proj-strip{ width:auto; flex:1 1 70%; min-width:0; }
.proj.is-active .proj-copy{ display:block; flex:1 1 30%; }
@media (max-width:900px){
  .proj.is-active{ flex-direction:column; align-items:stretch; gap:var(--space-2); }
  .proj:nth-child(even).is-active{ flex-direction:column; }
  .proj.is-active .proj-strip{ flex:none; width:100%; }
  .proj.is-active .proj-copy{ flex:none; }
  .proj-desc{ max-width:none; }
}

/* ---------- WORK / PHOTO STRIP (each project's own photos slide open; title chip is fixed bottom-left, always in the same spot regardless of which photo is active) ---------- */
.proj-strip{
  position:relative;
  display:flex;
  width:100%;
  height:110px;
  gap:0;
  overflow:hidden;
  border-radius:var(--radius-lg);
  box-shadow:0 20px 50px rgba(20,22,18,0.12);
  transition:height .7s var(--ease);
}
.proj.is-active .proj-strip{ height:clamp(320px, 34vw, 440px); }
.photo{
  position:relative;
  overflow:hidden;
  flex:1 1 0%;
  min-width:64px;
  border:0;
  padding:0;
  cursor:pointer;
  background-color:var(--ink);
  transition:flex-grow .7s var(--ease);
}
.photo img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  filter:grayscale(0.85) brightness(0.6);
  transition:filter .8s var(--ease);
}
.photo.is-active img{ filter:grayscale(0) brightness(1); }
.photo + .photo{ border-left:1px solid rgba(247,246,241,0.14); }
.photo.is-active{ flex:7 1 0%; }
.proj-strip::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(15,17,13,0.78) 0%, rgba(15,17,13,0.1) 45%, rgba(15,17,13,0.02) 100%);
  pointer-events:none;
  z-index:2;
}
.proj-label{
  position:absolute; left:0; right:0; bottom:0;
  z-index:5;
  display:flex;
  align-items:center;
  gap:0.85rem;
  padding:1.1rem 1.3rem;
  min-width:0;
  pointer-events:none;
}
.proj-icon{
  flex:0 0 auto;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(247,246,241,0.12);
  border:1px solid rgba(247,246,241,0.28);
  color:var(--paper);
}
.proj-title{
  display:block;
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(1.05rem, 0.9rem + 0.6vw, 1.5rem);
  color:var(--paper);
  white-space:nowrap;
}
.proj-sub{
  display:block;
  font-family:var(--mono);
  font-size:0.68rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(247,246,241,0.75);
  margin-top:0.3em;
  white-space:nowrap;
}
@media (max-width:760px){
  .proj-strip{ height:90px; } /* collapsed: stays a row, just shorter — active photo is still the wide slice */
  .proj.is-active .proj-strip{ height:auto; flex-direction:column; }
  .proj.is-active .photo{ flex:none; height:36px; transition:height .5s var(--ease); }
  .proj.is-active .photo + .photo{ border-left:0; border-top:1px solid rgba(247,246,241,0.14); }
  .proj.is-active .photo.is-active{ flex:none; height:230px; }
  .proj-label{ padding:0.9rem 1rem; gap:0.6rem; }
  .proj-icon{ width:32px; height:32px; }
  .proj-title{ font-size:1rem; }
}

/* ---------- QUALIFICATIONS ---------- */
.quals{
  display:flex;
  flex-direction:column;
}
.qual{
  border-top:1px solid var(--line);
  padding:var(--space-2) 0;
}
.quals .qual:last-child{
  border-bottom:1px solid var(--line);
}
.qual .org{
  font-family:var(--display);
  font-style:italic;
  font-weight:480;
  font-size:clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  margin:0 0 0.3em;
  color:var(--ink);
}
.qual .cert{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--gold);
  display:block;
  margin-bottom:0.8em;
}
.qual p{
  margin:0;
  color:var(--ink-60);
  font-size:0.98rem;
  max-width:70ch;
}

/* ---------- PRESS / COMING SOON ---------- */
.press-empty{
  text-align:center;
  padding:var(--space-4) var(--space-1);
}
.press-empty .pull{
  margin:0 auto 0.6em;
  max-width:22ch;
}
.press-empty p{
  color:var(--ink-60);
  font-family:var(--mono);
  font-size:0.75rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
}

/* ---------- PRESS LOGO WALL ---------- */
.press-logos{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:1.6rem 2.6rem;
  padding:var(--space-2) 0 var(--space-3);
  border-bottom:1px solid var(--line);
}
.press-logo{
  font-family:var(--display);
  font-style:italic;
  font-weight:480;
  font-size:clamp(1.05rem, 0.9rem + 0.6vw, 1.4rem);
  color:var(--ink);
  letter-spacing:0.01em;
  opacity:0.72;
  transition:opacity .3s var(--ease);
}
.press-logo:hover{ opacity:1; }
.press-logo em{
  font-style:normal;
  font-family:var(--mono);
  font-size:0.6em;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-35);
  margin-left:0.4em;
}

/* ---------- PRESS LIST ---------- */
.press-group-title{
  font-family:var(--display);
  font-style:italic;
  font-weight:480;
  font-size:clamp(1.3rem, 1.1rem + 1vw, 1.9rem);
  color:var(--moss);
  margin:0 0 0.4em;
}
.press-group-meta{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.08em;
  color:var(--ink-35);
  margin:0 0 var(--space-2);
}
.press-list{
  display:flex;
  flex-direction:column;
}
.press-item{
  display:grid;
  grid-template-columns:1fr 3fr 150px;
  gap:var(--space-1) var(--space-2);
  align-items:start;
  border-top:1px solid var(--line);
  padding:1.1rem 0;
}
.press-item .outlet{ padding-top:0.15em; }
.press-item .date{ padding-top:0.15em; }
@media (max-width:700px){
  .press-item{ grid-template-columns:1fr; gap:0.35rem; }
}
.press-item .outlet{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--gold);
}
.press-item h3{
  font-family:var(--body);
  font-weight:400;
  font-size:0.98rem;
  color:var(--ink);
  margin:0;
  line-height:1.5;
}
.press-item .date{
  font-family:var(--mono);
  font-size:0.7rem;
  color:var(--ink-35);
  white-space:nowrap;
  text-align:right;
}
.press-note{
  margin-top:var(--space-3);
  padding-top:var(--space-1);
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.04em;
  color:var(--ink-35);
  border-top:1px dashed var(--line);
}

/* ---------- MORE (homepage teasers for Qualifications / Press) ---------- */
.more-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--space-2);
}
@media (max-width:700px){ .more-grid{ grid-template-columns:1fr; } }
.more-link{
  display:block;
  border-top:1px solid var(--line);
  padding:1.6rem 0 0;
  text-decoration:none;
  color:inherit;
}
.more-link h3{
  font-family:var(--display);
  font-weight:480;
  font-style:italic;
  font-size:1.4rem;
  margin:0 0 0.6rem;
  color:var(--moss);
}
.more-link p{
  font-size:0.92rem;
  color:var(--ink-60);
  margin:0 0 1rem;
  max-width:42ch;
}
.more-link .go{
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-block;
  transition:transform .35s var(--ease);
}
.more-link:hover .go{ transform:translateX(6px); }

/* ---------- CONTACT ---------- */
.contact{
  text-align:left;
}
.contact .pull{ max-width:22ch; margin-bottom:var(--space-2); }
.contact-icons{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  border-top:1px solid var(--line);
  padding-top:var(--space-2);
}
.icon-circle{
  width:52px;
  height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--ink-60);
  text-decoration:none;
  position:relative;
  transition:border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.icon-circle:hover, .icon-circle:focus-visible{
  border-color:var(--gold);
  color:var(--gold);
  transform:translateY(-3px);
}
.icon-circle svg{ width:20px; height:20px; stroke:currentColor; }
.icon-circle .tip{
  position:absolute;
  bottom:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%);
  font-family:var(--mono);
  font-size:0.68rem;
  letter-spacing:0.06em;
  background:var(--ink);
  color:var(--paper);
  padding:0.3rem 0.6rem;
  border-radius:6px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s var(--ease);
}
.icon-circle:hover .tip, .icon-circle:focus-visible .tip{ opacity:1; }

footer{
  padding:var(--space-2) 0 var(--space-3);
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  font-family:var(--mono);
  font-size:0.68rem;
  letter-spacing:0.08em;
  color:var(--ink-35);
}
footer .top{
  text-decoration:none;
  color:var(--ink-35);
  border-bottom:1px solid transparent;
}
footer .top:hover{ border-color:var(--ink-35); }
