/* Orb Hair & Beauty — Website #54
   Teneriffe Hair House × Mirror-Line Editorial
   HTML + CSS only
*/

:root{
  --pearl:#fbfaf7;
  --paper:#ffffff;
  --forest:#111a18;
  --forest-2:#25302d;
  --silver:#c9cecc;
  --silver-dark:#8f9995;
  --apricot:#efb38f;
  --lilac:#dddce4;
  --almond:#e9ddca;
  --cobalt:#3157ff;
  --muted:#66706c;
  --line:rgba(17,26,24,.17);
  --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --sans:"Aptos","Helvetica Neue",Arial,sans-serif;
  --condensed:"Arial Narrow","Aptos Narrow",Arial,sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  --max:1460px;
  --gutter:clamp(1.1rem,4vw,4.6rem);
}

*,
*::before,
*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:2rem;
}

body{
  margin:0;
  overflow-x:hidden;
  background:var(--pearl);
  color:var(--forest);
  font-family:var(--sans);
  line-height:1.55;
  text-rendering:optimizeLegibility;
}

a{color:inherit;text-underline-offset:.22em}
a:focus-visible{outline:3px solid var(--cobalt);outline-offset:4px}

.skip-link{
  position:fixed;
  z-index:999;
  top:1rem;
  left:1rem;
  transform:translateY(-180%);
  padding:.75rem 1rem;
  background:var(--cobalt);
  color:white;
  font-weight:800;
  text-decoration:none;
}
.skip-link:focus{transform:translateY(0)}

.masthead{
  width:min(calc(100% - 2 * var(--gutter)),var(--max));
  min-height:94px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(190px,.9fr) minmax(460px,2.2fr) minmax(190px,.9fr);
  gap:2rem;
  align-items:center;
  border-bottom:1px solid var(--line);
}

.brand-lockup{display:grid;justify-items:start}
.brand{
  font-family:var(--condensed);
  font-size:1.75rem;
  font-weight:900;
  line-height:1;
  letter-spacing:-.055em;
  text-decoration:none;
}
.brand-lockup span,
.location-ref span,
.section-ref,
.micro,
.service-tag,
.panel-copy>span,
.footer-address>span,
.legal-ref{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.brand-lockup span{margin-top:.35rem;color:var(--muted)}

.main-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(.9rem,2vw,2.2rem);
}
.main-nav a,
.footer-nav a{
  position:relative;
  font-family:var(--condensed);
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.045em;
  text-transform:uppercase;
  text-decoration:none;
}
.main-nav a::after,
.footer-nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-.34rem;
  width:100%;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform 180ms ease;
}
.main-nav a:hover::after,
.footer-nav a:hover::after{
  transform:scaleX(1);
  transform-origin:left;
}

.location-ref{text-align:right;display:grid;gap:.2rem}
.location-ref span{color:var(--cobalt)}
.location-ref strong{
  font-family:var(--condensed);
  font-size:.74rem;
  letter-spacing:.05em;
}

/* Hero */
.hero{
  position:relative;
  width:min(calc(100% - 2 * var(--gutter)),var(--max));
  min-height:min(810px,88vh);
  margin:0 auto;
  padding:clamp(3.5rem,7vw,7rem) 0 clamp(5rem,9vw,9rem);
  display:grid;
  grid-template-columns:1.08fr .68fr .32fr;
  grid-template-rows:auto 1fr;
  gap:2rem;
  overflow:hidden;
}

.hero-copy{grid-column:1/3;position:relative;z-index:3;max-width:940px}
.micro{
  margin:0 0 1.4rem;
  display:flex;
  align-items:center;
  gap:1rem;
  color:var(--muted);
}
.micro i{
  width:2.2rem;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border:1px solid var(--silver-dark);
  border-radius:50%;
  color:var(--cobalt);
  font-style:normal;
}
.hero h1,
.legal-hero h1{
  max-width:11ch;
  margin:0;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(4.25rem,8.6vw,9rem);
  line-height:.88;
  letter-spacing:-.065em;
}
.hero-lede{
  max-width:600px;
  margin:2rem 0 1.5rem;
  font-size:clamp(1.08rem,1.7vw,1.38rem);
  color:var(--forest-2);
}
.editorial-link{
  display:inline-flex;
  align-items:center;
  gap:.8rem;
  padding:.65rem 0;
  border-bottom:1px solid currentColor;
  font-family:var(--condensed);
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
}
.editorial-link span{transition:transform 180ms ease}
.editorial-link:hover span{transform:translateX(5px)}

.hero-primary,
.hero-secondary,
.photo-shape,
.photo-curl,
.contact-sheet figure,
.visit-photo{
  margin:0;
  position:relative;
  overflow:hidden;
  background-color:var(--silver);
  background-size:cover;
  background-position:center;
  isolation:isolate;
}
.hero-primary::after,
.hero-secondary::after,
.photo-shape::after,
.photo-curl::after,
.contact-sheet figure::after,
.visit-photo::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg,rgba(17,26,24,.02),rgba(17,26,24,.16)),
    linear-gradient(120deg,rgba(239,179,143,.12),transparent 44%);
  mix-blend-mode:multiply;
}

.photo-hair{
  background-image:
    linear-gradient(0deg,rgba(17,26,24,.06),rgba(17,26,24,.01)),
    url("https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?auto=format&fit=crop&w=1500&q=85");
}
.photo-texture{
  background-image:
    linear-gradient(0deg,rgba(17,26,24,.05),rgba(17,26,24,.01)),
    url("https://images.unsplash.com/photo-1560066984-138dadb4c035?auto=format&fit=crop&w=1000&q=85");
}
.photo-shape{
  background-image:
    linear-gradient(0deg,rgba(17,26,24,.08),rgba(17,26,24,.02)),
    url("https://images.unsplash.com/photo-1527799820374-dcf8d9d4a388?auto=format&fit=crop&w=1200&q=85");
}
.photo-curl{
  background-image:
    linear-gradient(0deg,rgba(17,26,24,.08),rgba(17,26,24,.01)),
    url("https://images.unsplash.com/photo-1605497788044-5a32c7078486?auto=format&fit=crop&w=1200&q=85");
}
.photo-editorial{
  background-image:url("https://images.unsplash.com/photo-1562322140-8baeececf3df?auto=format&fit=crop&w=1400&q=85");
}
.photo-colour{
  background-image:url("https://images.unsplash.com/photo-1519699047748-de8e457a634e?auto=format&fit=crop&w=1000&q=85");
}
.photo-macro{
  background-image:url("https://images.unsplash.com/photo-1595476108010-b4d1f102b1b1?auto=format&fit=crop&w=1000&q=85");
}
.photo-finish{
  background-image:url("https://images.unsplash.com/photo-1559599101-f09722fb4948?auto=format&fit=crop&w=1000&q=85");
}
.photo-studio{
  background-image:
    linear-gradient(0deg,rgba(17,26,24,.12),rgba(17,26,24,.02)),
    url("https://images.unsplash.com/photo-1600948836101-f9ffda59d250?auto=format&fit=crop&w=1600&q=85");
}

.hero-primary{
  grid-column:2/4;
  grid-row:2;
  min-height:405px;
  align-self:end;
}
.hero-secondary{
  grid-column:1;
  grid-row:2;
  width:min(76%,320px);
  min-height:235px;
  align-self:end;
  transform:translateY(1.4rem);
}
.hero-primary figcaption,
.hero-secondary figcaption,
.photo-shape figcaption,
.photo-curl figcaption,
.contact-sheet figcaption,
.visit-photo figcaption{
  position:absolute;
  left:1rem;
  bottom:1rem;
  max-width:calc(100% - 2rem);
  padding:.45rem .6rem;
  background:rgba(251,250,247,.93);
  backdrop-filter:blur(4px);
  font-family:var(--mono);
  font-size:.61rem;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.mirror-line{
  position:absolute;
  top:2.6rem;
  right:27%;
  bottom:2.5rem;
  width:1px;
  background:linear-gradient(var(--silver-dark),transparent 18%,var(--silver-dark) 50%,transparent 84%,var(--silver-dark));
}
.mirror-line::before{
  content:"";
  position:absolute;
  top:16%;
  left:50%;
  width:15px;
  height:15px;
  transform:translate(-50%,-50%);
  border:1px solid var(--cobalt);
  border-radius:50%;
  background:var(--pearl);
}
.mirror-line span{
  position:absolute;
  top:63%;
  left:50%;
  width:7px;
  height:7px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--cobalt);
}
.hero-index{
  position:absolute;
  right:0;
  top:5.5rem;
  display:grid;
  gap:.55rem;
  text-align:right;
  color:var(--muted);
  font-family:var(--mono);
  font-size:.57rem;
  letter-spacing:.08em;
}
.hero-index span::before{content:"— ";color:var(--cobalt)}

/* Common sections */
.section-shell{
  width:min(calc(100% - 2 * var(--gutter)),var(--max));
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(150px,.55fr) minmax(0,2.45fr);
  gap:clamp(2rem,6vw,7rem);
}
.section-ref{margin:0;color:var(--cobalt)}
.section-side{position:relative}
.side-note{
  max-width:14rem;
  margin:7rem 0 0;
  font-family:var(--serif);
  font-style:italic;
  color:var(--muted);
}
.kicker{
  margin:0 0 1rem;
  color:var(--cobalt);
  font-family:var(--condensed);
  font-size:.84rem;
  font-weight:900;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.section-main h2,
.service-head h2,
.triad-title h2,
.edit-head h2{
  max-width:13ch;
  margin:0;
  font-family:var(--serif);
  font-size:clamp(3.1rem,6vw,6.7rem);
  font-weight:500;
  line-height:.94;
  letter-spacing:-.052em;
}

.intro{
  padding:clamp(5rem,10vw,10rem) 0;
  border-top:1px solid var(--line);
}
.intro-copy{
  max-width:1000px;
  margin-top:3rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,6rem);
}
.intro-copy p{margin:0;color:var(--forest-2);font-size:1.04rem}

/* Service index */
.service-index{
  padding:clamp(5rem,9vw,9rem) 0 0;
  background:var(--lilac);
  border-top:1px solid var(--line);
}
.service-head{padding-bottom:clamp(3rem,6vw,6rem)}
.service-rows{border-top:1px solid rgba(17,26,24,.2)}
.service-rows article{
  display:grid;
  grid-template-columns:minmax(70px,.38fr) minmax(150px,1fr) minmax(0,2.2fr) minmax(105px,.6fr);
  gap:2rem;
  align-items:start;
  padding:1.65rem max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter)));
  border-bottom:1px solid rgba(17,26,24,.17);
  transition:background 180ms ease;
}
.service-rows article:nth-child(2){background:rgba(239,179,143,.4)}
.service-rows article:nth-child(4){background:rgba(255,255,255,.28)}
.service-rows article:hover{background:var(--pearl)}
.service-no{
  color:var(--cobalt);
  font-family:var(--mono);
  font-size:.66rem;
}
.service-rows h3{
  margin:0;
  font-family:var(--condensed);
  font-size:clamp(1.35rem,2.2vw,2.25rem);
  line-height:1;
  letter-spacing:.02em;
}
.service-rows p{max-width:42rem;margin:0;color:var(--forest-2)}
.service-tag{text-align:right;color:var(--muted)}

/* Shape Tone Texture */
.triad{
  width:min(calc(100% - 2 * var(--gutter)),var(--max));
  margin:0 auto;
  padding:clamp(6rem,11vw,11rem) 0;
  display:grid;
  grid-template-columns:1.05fr .88fr 1.12fr;
  gap:1px;
}
.triad-title{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(150px,.55fr) 2.45fr;
  gap:clamp(2rem,6vw,7rem);
  margin-bottom:3.4rem;
}
.shape-panel,
.tone-panel,
.texture-panel{
  position:relative;
  min-height:570px;
  overflow:hidden;
  border:1px solid var(--line);
}
.shape-panel{background:var(--forest);color:var(--pearl)}
.tone-panel{background:var(--apricot)}
.texture-panel{background:var(--almond)}
.photo-shape,
.photo-curl{
  position:absolute;
  inset:0 0 37% 0;
}
.shape-panel .photo-shape{
  filter:grayscale(1) contrast(.95);
  opacity:.87;
}
.panel-copy{
  position:absolute;
  left:clamp(1.4rem,3vw,2.8rem);
  right:clamp(1.4rem,3vw,2.8rem);
  bottom:clamp(1.4rem,3vw,2.8rem);
  z-index:3;
}
.panel-copy>span{opacity:.75}
.panel-copy h3{
  margin:.8rem 0 .6rem;
  font-family:var(--serif);
  font-size:clamp(2.8rem,4.5vw,5rem);
  font-weight:500;
  line-height:.92;
  letter-spacing:-.05em;
}
.panel-copy p{max-width:28rem;margin:0}
.foil-geometry{
  position:absolute;
  inset:9% 11% 40% 11%;
  background:
    repeating-linear-gradient(90deg,rgba(17,26,24,.16) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(0deg,rgba(17,26,24,.13) 0 1px,transparent 1px 40px);
  transform:skewY(-5deg);
}
.foil-geometry::after{
  content:"TONE / REFLECT 02";
  position:absolute;
  right:0;
  bottom:-1.5rem;
  font-family:var(--mono);
  font-size:.58rem;
}

/* Process */
.experience{
  padding:clamp(6rem,10vw,10rem) 0;
  border-top:1px solid var(--line);
}
.reflection-rule{
  width:1px;
  height:500px;
  margin:2rem 0 0 1rem;
  background:
    repeating-linear-gradient(to bottom,var(--silver-dark) 0 1px,transparent 1px 14px);
}
.process-list{
  margin:3.4rem 0 1.4rem;
  padding:0;
  list-style:none;
  border-top:1px solid var(--line);
}
.process-list li{
  display:grid;
  grid-template-columns:65px minmax(110px,.6fr) minmax(0,2fr);
  gap:1.25rem;
  align-items:baseline;
  padding:1.2rem 0;
  border-bottom:1px solid var(--line);
}
.process-list span{color:var(--cobalt);font-family:var(--mono);font-size:.66rem}
.process-list strong{font-family:var(--condensed);letter-spacing:.045em}
.process-list p{margin:0;color:var(--muted)}
.process-note{max-width:560px;margin:1.4rem 0 0;color:var(--muted);font-size:.86rem}

/* Orb Edit */
.orb-edit{
  padding:clamp(6rem,10vw,10rem) var(--gutter);
  background:var(--forest);
  color:var(--pearl);
}
.edit-head,
.contact-sheet,
.mirror-notes{
  width:min(100%,var(--max));
  margin-inline:auto;
}
.edit-head{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:clamp(3rem,8vw,9rem);
  align-items:end;
  margin-bottom:3.5rem;
}
.edit-head>p{
  max-width:32rem;
  margin:0 0 .5rem;
  color:rgba(251,250,247,.7);
}
.orb-edit .kicker{color:var(--apricot)}
.orb-edit .section-ref{color:#8aa0ff}
.contact-sheet{
  min-height:690px;
  display:grid;
  grid-template-columns:1.4fr .72fr .65fr;
  grid-template-rows:1fr .63fr;
  gap:1rem;
}
.edit-large{grid-column:1;grid-row:1/3}
.edit-tall{grid-column:2;grid-row:1/3}
.edit-macro{grid-column:3;grid-row:1}
.edit-side{grid-column:3;grid-row:2}
.contact-sheet figure{min-height:240px}
.contact-sheet figcaption span{color:var(--cobalt);margin-right:.5rem}
.mirror-notes{
  margin-top:3rem;
  padding-top:1.5rem;
  border-top:1px solid rgba(251,250,247,.18);
  display:grid;
  grid-template-columns:.75fr 1fr 1fr 1fr;
  gap:2rem;
}
.mirror-notes strong{
  font-family:var(--condensed);
  font-size:.78rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.mirror-notes p:not(.section-ref){
  margin:.45rem 0 0;
  color:rgba(251,250,247,.68);
  font-size:.9rem;
}

/* Visit */
.visit{
  position:relative;
  min-height:760px;
  padding:clamp(5rem,9vw,8.5rem) var(--gutter);
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(3rem,8vw,9rem);
  background:var(--forest);
  color:var(--pearl);
  border-top:1px solid rgba(251,250,247,.15);
}
.visit-copy,
.visit-photo{width:100%;max-width:720px}
.visit-copy{
  position:relative;
  z-index:2;
  justify-self:end;
  align-self:center;
}
.visit-copy h2{
  margin:1.1rem 0 0;
  font-family:var(--serif);
  font-size:clamp(4rem,8vw,8.3rem);
  font-weight:500;
  line-height:.85;
  letter-spacing:-.06em;
}
.visit-copy h2 span{
  display:block;
  color:var(--apricot);
  font-family:var(--condensed);
  font-weight:900;
  letter-spacing:-.04em;
}
.city-ref{
  margin:1.4rem 0 3rem;
  color:#8aa0ff;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.09em;
}
.visit-copy address,
.footer-address address{font-style:normal}
.visit-copy address{margin:0 0 3rem;font-size:1.04rem}
.light{color:var(--apricot)}
.light-link{color:var(--pearl)}
.visit-photo{min-height:560px;align-self:center}
.visit-grid{
  position:absolute;
  inset:0;
  opacity:.14;
  background-image:
    linear-gradient(rgba(251,250,247,.25) 1px,transparent 1px),
    linear-gradient(90deg,rgba(251,250,247,.25) 1px,transparent 1px);
  background-size:70px 70px;
  mask-image:linear-gradient(90deg,transparent,black 40%,black);
}
.location-marker{
  position:absolute;
  width:200px;
  height:200px;
  left:43%;
  bottom:-90px;
  border:1px solid rgba(49,87,255,.75);
  border-radius:50%;
}
.location-marker span{
  position:absolute;
  top:18%;
  left:12%;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--apricot);
}

/* Footer */
.footer{
  padding:clamp(3rem,6vw,5rem) var(--gutter);
  display:grid;
  grid-template-columns:1fr 1fr 1.25fr;
  gap:3rem;
  align-items:end;
  background:var(--forest);
  color:var(--pearl);
  border-top:1px solid rgba(251,250,247,.15);
}
.footer-brand{display:grid}
.footer-brand strong{
  font-family:var(--condensed);
  font-size:clamp(3rem,6vw,6.4rem);
  line-height:.78;
  letter-spacing:-.065em;
}
.footer-brand span{
  margin-top:.8rem;
  color:var(--apricot);
  font-family:var(--mono);
  font-size:.64rem;
  letter-spacing:.08em;
}
.footer-address{display:grid;gap:1rem}
.footer-address>span{color:#8aa0ff}
.footer-nav{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.8rem 2rem;
  justify-items:start;
}

/* Legal */
.legal-shell{
  width:min(calc(100% - 2 * var(--gutter)),1180px);
  margin:0 auto;
  padding-bottom:clamp(5rem,9vw,9rem);
}
.legal-hero{
  padding:clamp(4rem,9vw,9rem) 0 clamp(4rem,7vw,7rem);
  border-bottom:1px solid var(--line);
}
.legal-hero h1{
  max-width:10ch;
  font-size:clamp(3.5rem,7.6vw,7.8rem);
}
.legal-hero>p:last-child{
  max-width:620px;
  margin:2rem 0 0;
  color:var(--muted);
  font-size:1.08rem;
}
.legal-section{
  display:grid;
  grid-template-columns:150px minmax(0,760px);
  gap:clamp(2rem,8vw,8rem);
  padding:clamp(4rem,7vw,7rem) 0;
  border-bottom:1px solid var(--line);
}
.legal-ref{padding-top:.6rem;color:var(--cobalt)}
.legal-copy h2{
  margin:0 0 3rem;
  font-family:var(--serif);
  font-size:clamp(3rem,5vw,5.2rem);
  font-weight:500;
  line-height:1;
  letter-spacing:-.045em;
}
.legal-copy h3{
  margin:2.5rem 0 .6rem;
  font-family:var(--condensed);
  font-size:.93rem;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.legal-copy p{margin:0;color:var(--forest-2)}
.legal-return{padding-top:3rem}

/* Tablet */
@media (max-width:1100px){
  .masthead{
    grid-template-columns:1fr 1.4fr;
    padding:1.2rem 0;
  }
  .main-nav{
    grid-column:1/-1;
    grid-row:2;
    justify-content:flex-start;
    padding-top:.9rem;
    border-top:1px solid var(--line);
  }
  .location-ref{grid-column:2;grid-row:1}
  .hero{
    grid-template-columns:1.15fr .85fr;
    grid-template-rows:auto auto;
  }
  .hero-copy{grid-column:1/-1}
  .hero-primary{grid-column:1/-1;min-height:430px}
  .hero-secondary{display:none}
  .mirror-line{right:10%}
  .triad{grid-template-columns:1fr 1fr}
  .triad-title{grid-column:1/-1}
  .texture-panel{grid-column:1/-1;min-height:430px}
  .contact-sheet{
    grid-template-columns:1.25fr .75fr;
    grid-template-rows:1fr .8fr;
    min-height:780px;
  }
  .edit-large{grid-column:1;grid-row:1/3}
  .edit-tall{grid-column:2;grid-row:1}
  .edit-macro{grid-column:2;grid-row:2}
  .edit-side{display:none}
  .mirror-notes{grid-template-columns:1fr 1fr 1fr}
  .mirror-notes>.section-ref{grid-column:1/-1}
  .footer{grid-template-columns:1fr 1fr}
  .footer-nav{
    grid-column:1/-1;
    grid-template-columns:repeat(4,minmax(0,1fr));
    padding-top:1.5rem;
    border-top:1px solid rgba(251,250,247,.15);
  }
}

/* Mobile */
@media (max-width:760px){
  :root{--gutter:1.15rem}
  html{scroll-padding-top:1rem}

  .masthead{
    min-height:auto;
    grid-template-columns:1fr auto;
    gap:1rem;
  }
  .brand{font-size:1.5rem}
  .location-ref strong{display:none}
  .location-ref span{font-size:.57rem}
  .main-nav{gap:.55rem 1rem;padding-bottom:.2rem}
  .main-nav a{font-size:.68rem}

  .hero{
    min-height:auto;
    display:block;
    padding:4rem 0 5rem;
  }
  .hero h1{max-width:9ch;font-size:clamp(3.7rem,19vw,6.3rem)}
  .hero-lede{margin-top:1.5rem}
  .hero-primary{min-height:350px;margin-top:3rem}
  .mirror-line,
  .hero-index{display:none}

  .section-shell,
  .triad-title{
    grid-template-columns:1fr;
  }
  .intro,
  .experience{padding-block:5rem}
  .side-note{margin:1rem 0 2.5rem}
  .section-main h2,
  .service-head h2,
  .triad-title h2,
  .edit-head h2{
    font-size:clamp(2.8rem,14vw,4.8rem);
  }
  .intro-copy{grid-template-columns:1fr;gap:1.2rem}

  .service-index{padding-top:5rem}
  .service-rows article{
    grid-template-columns:42px 1fr;
    gap:.65rem 1rem;
    padding:1.35rem var(--gutter);
  }
  .service-rows p{grid-column:2}
  .service-tag{grid-column:2;text-align:left}

  .triad{
    grid-template-columns:1fr;
    padding-block:5rem;
  }
  .triad-title{gap:1rem}
  .shape-panel,
  .tone-panel,
  .texture-panel{
    grid-column:auto;
    min-height:430px;
  }

  .reflection-rule{display:none}
  .process-list li{grid-template-columns:42px 1fr}
  .process-list p{grid-column:2}

  .orb-edit{padding-block:5rem}
  .edit-head{grid-template-columns:1fr;gap:1.5rem}
  .contact-sheet{
    min-height:auto;
    grid-template-columns:1fr 1fr;
    grid-template-rows:420px 280px;
  }
  .edit-large{grid-column:1/-1;grid-row:1}
  .edit-tall{grid-column:1;grid-row:2}
  .edit-macro{grid-column:2;grid-row:2}
  .mirror-notes{grid-template-columns:1fr;gap:1.4rem}

  .visit{
    min-height:auto;
    grid-template-columns:1fr;
    padding-block:5rem;
  }
  .visit-copy{justify-self:start}
  .visit-copy h2{font-size:clamp(4rem,18vw,6.7rem)}
  .visit-photo{min-height:380px}

  .footer{grid-template-columns:1fr;padding-block:3rem}
  .footer-nav{grid-column:auto;grid-template-columns:1fr 1fr}

  .legal-section{grid-template-columns:1fr;gap:1.2rem}
  .legal-hero h1{font-size:clamp(3.4rem,17vw,6.5rem)}
}

/* Very small screens */
@media (max-width:390px){
  .main-nav{display:grid;grid-template-columns:repeat(3,1fr)}
  .location-ref{max-width:110px}
  .hero h1{font-size:3.5rem}
  .footer-nav{grid-template-columns:1fr}
}

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