/* ==========================================================================
   DS Creative - Davis Shiflett Creative Co.
   A personal creative studio. Warm, layered, journal-like.
   Custom build - Arquilla Solutions
   ========================================================================== */

:root{
  /* Primary palette per the brand foundation: white, warm cream, soft baby blue, rich brown */
  --white:#FDFCFA;
  --cream:#F3EEE4;
  --cream-deep:#EAE3D5;
  --blue:#D1DEEC;
  --blue-deep:#B9CCE0;
  --brown:#3D2500;
  --cocoa:#5D4A30;
  --olive:#5F6244;      /* small accents only. AA on cream, white and blue. */
  --taupe:#BDBCA3;
  --chocolate:#2E1B02;   /* deep chocolate, footer only */

  --ink:var(--brown);
  --muted:#705E47;
  --rule:rgba(93,74,48,.22);

  --serif:'Cormorant Garamond','Times New Roman',serif;
  --script:'Pinyon Script','Cormorant Garamond',cursive; /* stand-in for Shelly Script */

  --gut:clamp(1.5rem,5vw,4.5rem);
  --sec:clamp(3.5rem,7.5vw,6.5rem);
  --r:16px;        /* soft corners everywhere */
  --r-sm:6px;
  --max:1300px;

  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem}
img,svg{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
ul{list-style:none}
a{color:inherit;text-decoration:none}

body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.02rem,.96rem + .3vw,1.18rem);
  line-height:1.78;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Paper grain over the whole page. Subtle, but it is what stops flat colour
   reading as "template" and starts it reading as "paper". */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/></filter><rect width='300' height='300' filter='url(%23g)' opacity='.16'/></svg>");
}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sec)}

/* ---------- type ---------- */
.eyebrow{
  font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--olive);font-weight:500;margin-bottom:1.8em;
}
.mono{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--olive)}

.script{font-family:var(--script);font-weight:400;line-height:1.3;color:var(--cocoa)}
.script--xl{font-size:clamp(2.7rem,6vw,4.4rem);margin-bottom:.4em}

.h2{
  font-size:clamp(1.85rem,1.15rem + 2.6vw,3.15rem);
  font-weight:300;line-height:1.22;letter-spacing:-.012em;
}

p + p{margin-top:1.15em}


.link{
  display:inline-block;margin-top:2.2rem;
  font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--cocoa);
  padding-bottom:.5em;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;
  transition:background-size .6s var(--ease),color .4s ease;
}
.link:hover{background-size:0% 1px;color:var(--olive)}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--brown);--fg:var(--brown);--bd:rgba(93,74,48,.4);
  position:relative;display:inline-block;
  padding:1.15em 2.7em;border:1px solid var(--bd);color:var(--fg);
  font-size:.67rem;letter-spacing:.24em;text-transform:uppercase;line-height:1;
  overflow:hidden;isolation:isolate;
  transition:color .55s var(--ease),border-color .55s var(--ease);
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--bg);
  transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--ease);
}
.btn:hover::after{transform:scaleY(1)}
.btn--ink{--bg:var(--blue)}
.btn--ink:hover{color:var(--brown);border-color:var(--blue-deep)}
.btn--light{--fg:var(--brown);--bd:rgba(61,37,0,.4);--bg:var(--brown)}
.btn--light:hover{color:var(--blue);border-color:var(--brown)}
.btn--outline{padding:.85em 1.9em;--bg:var(--blue)}
.btn--outline:hover{color:var(--brown);border-color:var(--blue-deep)}

/* ==========================================================================
   PLACEHOLDER IMAGERY - swap each .ph for a real <img>, ratios stay
   ========================================================================== */
.ph{
  position:relative;overflow:hidden;
  background:
    radial-gradient(110% 80% at 25% 15%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    linear-gradient(158deg,var(--cream-deep) 0%,var(--taupe) 55%,var(--cocoa) 100%);
}
.ph::after{
  content:"";position:absolute;inset:-40%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/></svg>");
  mix-blend-mode:overlay;opacity:.45;pointer-events:none;
}
.ph--warm{background:radial-gradient(110% 80% at 25% 15%,rgba(255,255,255,.5),rgba(255,255,255,0) 60%),linear-gradient(158deg,var(--cream-deep),#A98F6A 60%,var(--cocoa))}
.ph--blue{background:radial-gradient(110% 80% at 25% 15%,rgba(255,255,255,.55),rgba(255,255,255,0) 60%),linear-gradient(158deg,var(--white),var(--blue) 45%,var(--blue-deep))}
.ph--deep{background:linear-gradient(158deg,var(--cocoa),var(--brown) 65%,#241500)}

/* curtain reveal. Never clip-path: a collapsed clip zeroes the intersection
   area and IntersectionObserver would never fire. */
.reveal-img{position:relative;isolation:isolate}
.reveal-img::before{
  content:"";position:absolute;inset:0;z-index:3;
  background:var(--curtain,var(--cream));
  transform:scaleY(1);transform-origin:bottom;
  transition:transform 1.35s var(--ease);
}
.reveal-img.is-in::before{transform:scaleY(0)}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  transition:background .6s var(--ease),box-shadow .6s var(--ease);
}
.nav__inner{
  max-width:var(--max);margin-inline:auto;padding:1.5rem var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  transition:padding .6s var(--ease);
}
.nav.is-solid{background:var(--white);box-shadow:0 1px 0 var(--rule)}
.nav.is-solid .nav__inner{padding-block:1rem}

.nav__brand{display:block;flex:0 0 auto}
.nav__brand img{width:clamp(150px,17vw,215px);height:auto;transition:opacity .4s ease}
.nav__brand:hover img{opacity:.72}

.nav__links{display:none;gap:2.75rem}
.nav__links a{font-size:.67rem;letter-spacing:.22em;text-transform:uppercase;position:relative;padding-block:.4em}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease);
}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__cta{display:none}

.nav__toggle{background:none;border:0;cursor:pointer;width:44px;height:44px;padding:10px 5px;margin-right:-5px;display:flex;flex-direction:column;justify-content:center;gap:7px}
.nav__toggle span{height:1px;background:currentColor;transition:transform .5s var(--ease),width .5s var(--ease)}
.nav__toggle span:last-child{width:60%;margin-left:auto}
body.menu-open .nav__toggle span:first-child{transform:translateY(4px) rotate(45deg)}
body.menu-open .nav__toggle span:last-child{width:100%;transform:translateY(-4px) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:45;background:var(--white);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(8rem,20vh,11rem) var(--gut) 3rem;
  clip-path:inset(0 0 100% 0);pointer-events:none;visibility:hidden;
  transition:clip-path .8s var(--ease),visibility 0s linear .8s;
}
body.menu-open .menu{clip-path:inset(0);pointer-events:auto;visibility:visible;transition-delay:0s,0s}
body.menu-open .nav{color:var(--ink)}
.menu__links{display:flex;flex-direction:column;gap:.3em}
.menu__links a{overflow:hidden;display:block}
.menu__links a span{
  display:block;font-size:clamp(2.4rem,12vw,3.6rem);line-height:1.2;
  transform:translateY(105%);transition:transform .8s var(--ease);
}
body.menu-open .menu__links a span{transform:translateY(0)}
body.menu-open .menu__links a:nth-child(1) span{transition-delay:.16s}
body.menu-open .menu__links a:nth-child(2) span{transition-delay:.22s}
body.menu-open .menu__links a:nth-child(3) span{transition-delay:.28s}
body.menu-open .menu__links a:nth-child(4) span{transition-delay:.34s}
.menu__foot{margin-top:auto;padding-top:3rem;display:flex;flex-direction:column;gap:.6rem;border-top:1px solid var(--rule)}

/* ==========================================================================
   HERO - full bleed, the copy sits directly on the photograph
   ========================================================================== */
.hero{
  position:relative;isolation:isolate;display:grid;place-items:center;
  min-height:clamp(560px,92svh,960px);
  padding:clamp(6.5rem,14vh,9rem) var(--gut) clamp(3rem,7vh,5rem);
  background:var(--brown);
}
.hero__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  transform:scale(1.08);animation:drift 18s var(--ease) forwards;
}
@keyframes drift{to{transform:scale(1)}}
/* Warm scrim. Deep enough for cream type over the white dress, light enough
   that Scout and Davis both still read. Measured, not eyeballed. */
.hero__media::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(var(--scrim),.55) 0%,rgba(var(--scrim),.2) 22%,rgba(var(--scrim),0) 40%),
    linear-gradient(0deg,rgba(var(--scrim),.5) 0%,rgba(var(--scrim),.14) 30%,rgba(var(--scrim),0) 56%),
    radial-gradient(60% 50% at 50% 50%,rgba(var(--scrim),.68),rgba(var(--scrim),.3) 60%,rgba(var(--scrim),0) 85%);
}
.hero__title{font-weight:300;line-height:1.16;letter-spacing:-.018em}
.hero__title em{font-style:italic}
/* phones: shorter hero so the cover crop keeps more of Scout and Davis.
   The scrim is rebuilt here rather than inherited: the desktop radial is 60%
   of the element box, and on a narrow screen the copy runs wider than that,
   so the ends of every line fell outside the darkened core. Measured at 390:
   the desktop scrim left 83% of the sub-line under 4.5:1. This one leaves 1%,
   without flattening the photograph the way a full-strength scrim did. */
@media (max-width:699px){
  .hero{min-height:clamp(440px,60svh,560px);padding-top:clamp(5.5rem,16vh,7rem)}
  .hero__media img{object-position:50% 52%}
  .hero__media::after{
    background:
      linear-gradient(180deg,rgba(var(--scrim),.56) 0%,rgba(var(--scrim),.26) 22%,rgba(var(--scrim),.1) 40%),
      linear-gradient(0deg,rgba(var(--scrim),.5) 0%,rgba(var(--scrim),.18) 30%,rgba(var(--scrim),.04) 56%),
      radial-gradient(130% 66% at 50% 47%,rgba(var(--scrim),.6),rgba(var(--scrim),.32) 65%,rgba(var(--scrim),.12) 100%);
  }
}

/* ==========================================================================
   A LITTLE ABOUT ME
   ========================================================================== */
.about{background:var(--cream);--curtain:var(--cream)}
.about__grid{display:grid;gap:clamp(3rem,6vw,6rem);align-items:center}
.about__art{position:relative;padding-bottom:clamp(3rem,7vw,5rem)}
.about__copy p:not(.script){color:var(--muted)}

/* ==========================================================================
   FAQ (AEO)
   ========================================================================== */
.faq{background:var(--cream)}
.faq__grid{display:grid;gap:clamp(2.5rem,5vw,5rem)}
.faq__item{border-top:1px solid var(--rule)}
.faq__list .faq__item:last-child{border-bottom:1px solid var(--rule)}
.faq__item summary{
  list-style:none;cursor:pointer;padding-block:1.5rem;
  display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary h3{
  font-size:clamp(1.12rem,1rem + .6vw,1.4rem);font-weight:300;line-height:1.35;
  transition:color .4s ease;
}
.faq__item summary:hover h3{color:var(--cocoa)}
.faq__item summary::after{
  content:"";flex:0 0 12px;height:12px;margin-top:.55em;
  background:linear-gradient(var(--cocoa),var(--cocoa)) center/100% 1px no-repeat,
             linear-gradient(var(--cocoa),var(--cocoa)) center/1px 100% no-repeat;
  transition:transform .5s var(--ease);
}
.faq__item[open] summary::after{transform:rotate(90deg);background:linear-gradient(var(--cocoa),var(--cocoa)) center/100% 1px no-repeat}
.faq__item > p{padding-bottom:1.8rem;max-width:64ch;color:var(--muted)}

/* ==========================================================================
   FINAL INVITATION - baby blue, per Davis
   ========================================================================== */
.invite{
  position:relative;background:var(--blue);color:var(--brown);
  min-height:clamp(460px,66vh,640px);
  display:grid;place-items:center;text-align:center;overflow:hidden;
}
.invite__body{position:relative;z-index:2;padding-inline:var(--gut);max-width:720px}
.invite__over{font-size:clamp(1.45rem,1.1rem + 1.3vw,2.1rem);color:var(--cocoa);margin-bottom:.1em}
.invite__title{font-size:clamp(2.1rem,1.3rem + 3.6vw,4.2rem);font-weight:300;line-height:1.1;letter-spacing:-.018em;margin-bottom:.45em}
.invite__sub{max-width:46ch;margin:0 auto 2.6em;color:rgba(61,37,0,.72)}

/* headline mask reveal */
.line{display:block;overflow:hidden}
.line > span{display:block;transform:translateY(102%);transition:transform 1.25s var(--ease)}
.hero .line > span{transform:translateY(0)}
.hero .line:nth-child(1) > span{transition-delay:.3s}
.hero .line:nth-child(2) > span{transition-delay:.42s}
.invite.is-in .line > span{transform:translateY(0);transition-delay:.2s}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{background:var(--chocolate);color:var(--cream);padding-block:clamp(4rem,8vw,6.5rem) 2.5rem}
.foot__mark{margin-bottom:clamp(3.5rem,7vw,5.5rem);display:flex;justify-content:center}
.foot__mark img{width:clamp(220px,34vw,420px);height:auto}
.foot__cols{display:grid;gap:clamp(2.5rem,5vw,3.5rem);padding-bottom:clamp(3rem,6vw,4.5rem);border-bottom:1px solid rgba(243,238,228,.2)}
.foot__col{display:flex;flex-direction:column;gap:.55rem}
.foot__col .eyebrow{color:rgba(243,238,228,.55);margin-bottom:.9em}
.foot__col a,.foot__col span{font-size:.97rem;color:rgba(243,238,228,.8);transition:color .4s ease}
.foot__col a:hover{color:var(--white)}
.foot__note{font-size:.97rem;color:rgba(243,238,228,.7);max-width:34ch;margin-bottom:.8rem}
.foot__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem 2rem;padding-top:2.2rem;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(243,238,228,.55)}

/* ==========================================================================
   REVEAL
   ========================================================================== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
[data-d="1"]{transition-delay:.09s}
[data-d="2"]{transition-delay:.18s}
[data-d="3"]{transition-delay:.27s}
[data-d="4"]{transition-delay:.36s}
[data-d="5"]{transition-delay:.45s}
[data-d="6"]{transition-delay:.54s}

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */
@media (min-width:760px){
  .foot__cols{grid-template-columns:1fr 1fr}
}

@media (min-width:1000px){
  .nav__toggle{display:none}
  .nav__links,.nav__cta{display:flex}
  .nav__inner{position:relative}
  .nav__links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}

  .about__grid{grid-template-columns:.85fr 1fr}
  .faq__grid{grid-template-columns:.62fr 1fr;align-items:start}
  .foot__cols{grid-template-columns:1fr 1fr 1.4fr;gap:clamp(2rem,5vw,5rem)}
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
  .reveal-img::before{transform:scaleY(0)}
  .line > span{transform:none}
  .hero__media img{transform:none;animation:none}
}

/* ==========================================================================
   PAGE HEADER - used by 404.html and privacy.html
   ========================================================================== */
.phero{
  background:var(--cream);
  padding:clamp(9rem,15vw,13rem) var(--gut) clamp(3.5rem,7vw,5.5rem);
  text-align:center;
}
.phero__inner{max-width:var(--max);margin-inline:auto}
.phero__over{font-size:clamp(1.5rem,1.1rem + 1.5vw,2.3rem);margin-bottom:.05em}
.phero__title{
  font-size:clamp(2.2rem,1.3rem + 3.6vw,4.1rem);
  font-weight:300;line-height:1.1;letter-spacing:-.02em;
}
.phero__sub{max-width:56ch;margin:1.6em auto 0;color:var(--muted)}

/* ---------- process: how it works ---------- */
.proc{background:var(--cream)}
.proc__list{margin-top:1rem}
.proc__item{
  padding-block:2.1rem;border-top:1px solid var(--rule);
  display:grid;grid-template-columns:auto 1fr;column-gap:clamp(1.5rem,4vw,3.5rem);row-gap:.3rem;align-items:baseline;
}
.proc__item:last-child{border-bottom:1px solid var(--rule)}
.proc__num{font-family:var(--script);font-size:1.6rem;color:var(--olive);line-height:1}
.proc__title{font-size:clamp(1.4rem,1.15rem + 1.1vw,2rem);font-weight:300;line-height:1.2}
.proc__item p{grid-column:2;color:var(--muted);max-width:48ch}

@media (min-width:700px){
  .proc__item{grid-template-columns:auto 1fr 1.2fr}
  .proc__item p{grid-column:3}
}

/* current page marker */
.nav__links a[aria-current="page"]{color:var(--cocoa)}
.nav__links a[aria-current="page"]::after{transform:scaleX(1)}

/* ==========================================================================
   ONE-PAGER ADDITIONS (2026-08-25). Real photography replaces the .ph slots.
   ========================================================================== */

.intro{background:var(--cream);text-align:center}
.intro__inner{max-width:800px;margin-inline:auto}
.intro .h2{margin-bottom:1em;max-width:22em;margin-inline:auto}
.intro p{color:var(--muted);max-width:60ch;margin-inline:auto}

.about__tall{width:100%;aspect-ratio:3/4;overflow:hidden}
.about__art{padding-bottom:0}
.about__tall img{width:100%;height:100%;object-fit:cover}
.about__cap{margin-top:1rem;text-align:right}

.foot__col .foot__mail{font-size:1.15rem;color:var(--white)}

.nf{min-height:70vh;display:grid;place-items:center;text-align:center;padding:clamp(9rem,15vw,13rem) var(--gut) 5rem}

/* ---------- 2026-08-25: soft corners + compact rhythm ---------- */
.about__tall,.about__tall img{border-radius:var(--r)}
.btn,.btn::after{border-radius:var(--r-sm)}
.faq__item,.menu{border-radius:0}
.intro .h2{margin-bottom:clamp(2rem,4vw,3rem)}
.about__grid{gap:clamp(2.5rem,5vw,4.5rem)}
.proc__item{padding-block:1.6rem}
.faq__item summary{padding-block:1.2rem}
.faq__item > p{padding-bottom:1.4rem}
.invite{min-height:clamp(380px,52vh,520px)}
.foot{padding-block:clamp(3rem,6vw,4.5rem) 2rem}
.foot__mark{margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.foot__cols{padding-bottom:clamp(2rem,4vw,3rem)}
.foot__base{padding-top:1.6rem}

/* ---------- 2026-08-25: symmetry pass ---------- */
/* process: fixed number column so titles and descriptions line up row to row */
.proc__item{grid-template-columns:4.5rem 1fr}
@media (min-width:700px){.proc__item{grid-template-columns:4.5rem 1fr 1.2fr}}
/* footer: links hug their text instead of stretching the column */
.foot__col a{align-self:flex-start}

/* ==========================================================================
   2026-09-11 - v7 REVISION (Davis's merge brief)
   Old site stays the visual north star. This block only adds the new
   architecture: full-bleed hero with no card, the Social Media Management
   section with three options, before/after, other ways, Instagram.
   Type rules: Cormorant = headings. Pinyon (our stand-in for Shelley) =
   formal script. Caveat (stand-in for the casual handwritten face) = the
   three small notes only. The two are never swapped.
   ========================================================================== */

:root{
  --scrim:46,27,2;                          /* chocolate, as an rgb triplet */
}

/* ---------- shared small parts ---------- */
.rule{display:block;width:64px;height:1px;background:var(--rule);margin:1.8rem auto 0}

/* small personal notes. Pinyon, per Davis 2026-09-13 (Caveat retired). */
.note{
  font-family:var(--script);font-weight:400;line-height:1.25;
  font-size:clamp(1.45rem,1.2rem + .9vw,1.95rem);
  color:var(--cocoa);
}

/* ==========================================================================
   HERO - full bleed, copy sits directly on the photograph
   ========================================================================== */
.hero{background:var(--brown)}
.hero__media::after{
  /* replaces the v6 cream top fade. Warm scrim: enough for cream type over
     a bright white dress, light enough to keep Scout and Davis readable. */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(var(--scrim),.52) 0%,rgba(var(--scrim),.16) 22%,rgba(var(--scrim),0) 40%),
    linear-gradient(0deg,rgba(var(--scrim),.50) 0%,rgba(var(--scrim),.14) 30%,rgba(var(--scrim),0) 56%),
    radial-gradient(72% 58% at 50% 54%,rgba(var(--scrim),.44),rgba(var(--scrim),0) 74%);
}
.hero__media img{object-position:50% 50%}

.hero__copy{
  position:relative;z-index:2;text-align:center;
  width:min(100%,760px);color:var(--white);
  text-shadow:0 1px 28px rgba(var(--scrim),.45);
}
.hero__copy .hero__title{
  font-size:clamp(2.05rem,1.2rem + 3.3vw,3.6rem);
  margin-bottom:.55em;color:var(--white);
}
.hero__copy .hero__title em{color:var(--cream)}
.hero__copy .hero__sub{
  max-width:50ch;margin:0 auto 2.2em;
  color:rgba(253,252,250,.9);font-size:clamp(1rem,.95rem + .25vw,1.14rem);
}
.btn--hero{--fg:var(--white);--bd:rgba(253,252,250,.6);--bg:var(--white)}
.btn--hero:hover{color:var(--brown);border-color:var(--white)}

/* phones: shorter hero so the cover crop keeps more of Scout and Davis.
   The scrim is rebuilt here rather than inherited: the desktop radial is 60%
   of the element box, and on a narrow screen the copy runs wider than that,
   so the ends of every line fell outside the darkened core. Measured at 390:
   the desktop scrim left 83% of the sub-line under 4.5:1. This one leaves 1%,
   without flattening the photograph the way a full-strength scrim did. */
@media (max-width:699px){
  .hero{min-height:clamp(440px,60svh,560px);padding-top:clamp(5.5rem,16vh,7rem)}
  .hero__media img{object-position:50% 52%}
  .hero__media::after{
    background:
      linear-gradient(180deg,rgba(var(--scrim),.56) 0%,rgba(var(--scrim),.26) 22%,rgba(var(--scrim),.1) 40%),
      linear-gradient(0deg,rgba(var(--scrim),.5) 0%,rgba(var(--scrim),.18) 30%,rgba(var(--scrim),.04) 56%),
      radial-gradient(130% 66% at 50% 47%,rgba(var(--scrim),.6),rgba(var(--scrim),.32) 65%,rgba(var(--scrim),.12) 100%);
  }
}

/* ---------- nav sits on the photograph until it solidifies ---------- */
.nav{color:var(--cream)}
.nav.is-solid{color:var(--ink)}
.nav__brand{position:relative;line-height:0}
.nav__logo--dark{display:none}
.nav.is-solid .nav__logo--light{display:none}
.nav.is-solid .nav__logo--dark{display:block}
body.menu-open .nav__logo--light{display:none}
body.menu-open .nav__logo--dark{display:block}
.nav .btn--outline{--fg:currentColor;--bd:currentColor;--bg:var(--white)}
.nav.is-solid .btn--outline{--bg:var(--blue)}
.nav .btn--outline:hover{color:var(--brown)}

/* ==========================================================================
   SOCIAL MEDIA MANAGEMENT - the primary service
   ========================================================================== */
.smm{background:var(--blue);--curtain:var(--blue)}
.smm__head{text-align:center;max-width:760px;margin:0 auto clamp(2.5rem,5vw,4rem)}
.smm__head .h2{margin-bottom:.45em}
.smm__price{
  font-size:clamp(1.02rem,.96rem + .35vw,1.2rem);
  color:rgba(61,37,0,.78);letter-spacing:.01em;
}
.smm__price strong{font-weight:500;color:var(--brown)}
.smm .rule{background:rgba(61,37,0,.28)}

/* ==========================================================================
   ABOUT on white, with one handwritten note
   ========================================================================== */
.about--white{background:var(--white);--curtain:var(--white)}
.about__art{
  display:grid;grid-template-columns:1fr auto;column-gap:1.2rem;
  grid-template-areas:"img img" "note cap";align-items:baseline;
}
.about__tall{grid-area:img}
.about__tall img{object-position:54% 16%}
.note--about{
  grid-area:note;justify-self:start;margin-top:.9rem;
  transform:rotate(-4deg);transform-origin:left center;color:var(--olive);
}
.about__cap{grid-area:cap;justify-self:end}

/* ==========================================================================
   INSTAGRAM - the bridge between the questions and the close
   ========================================================================== */
.gram{background:var(--cream);--curtain:var(--cream);padding-block:clamp(3rem,6vw,5rem)}
.gram__head{text-align:center;margin-bottom:clamp(1.8rem,3.5vw,2.6rem)}
.gram__head .eyebrow{margin-bottom:.9em}
.gram__handle{
  font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--cocoa);
  padding-bottom:.45em;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;
  transition:background-size .6s var(--ease),color .4s ease;display:inline-block;
}
.gram__handle:hover{background-size:0% 1px;color:var(--olive)}
.gram__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.5rem,1.4vw,1rem)}
.gram__tile{display:block;overflow:hidden;border-radius:var(--r-sm)}
.gram__tile .ph{display:block;aspect-ratio:1;width:100%;transition:transform 1.2s var(--ease)}
.gram__tile:hover .ph{transform:scale(1.04)}

/* ==========================================================================
   FINAL CTA note
   ========================================================================== */
.faq--white{background:var(--white)}
.note--invite{margin-top:1.6rem;transform:rotate(-2deg);color:rgba(61,37,0,.72)}

/* ==========================================================================
   v7 BREAKPOINTS
   ========================================================================== */
@media (min-width:700px){
  .gram__grid{grid-template-columns:repeat(4,1fr)}
}

/* ==========================================================================
   2026-09-12 - POST-AUDIT FIXES
   Accessibility, tap targets and the swap-in rules for the images that are
   still owed. Nothing here changes the design.
   ========================================================================== */

/* the mobile menu is display:none on desktop, so it cannot be tabbed into */
@media (min-width:1000px){.menu{display:none}}

/* 44px minimum tap targets on phones. The display change has to be followed by
   the nav CTA's own visibility rules, or .btn beats .nav__cta{display:none}
   and the button reappears next to the hamburger. */
.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.nav__cta{display:none}
@media (min-width:1000px){.nav__cta{display:inline-flex}}
.link,.gram__handle{padding-block:.7em}
.foot__col a{padding-block:.3rem}

/* smallest type on the page was under 10px */
.foot__base{font-size:.62rem}

/* moved off an inline style attribute in the footer and the 404 */
.foot__col .link{margin-top:.4rem;color:var(--cream)}
.nf .btn{margin-top:2.4rem}

/* SWAP TARGET: real Instagram posts drop straight in without breaking the row */
.gram__tile img{display:block;width:100%;aspect-ratio:1;object-fit:cover;transition:transform 1.2s var(--ease)}
.gram__tile:hover img{transform:scale(1.04)}

/* the cream outline button sits on the white dress until the nav solidifies */
.nav:not(.is-solid) .btn--outline{background:rgba(var(--scrim),.38);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* ==========================================================================
   2026-09-13 - v10: DAVIS'S FINAL COPY, FOLDED INTO THE v8 STRUCTURE
   Every v8 section stays. Her copy fills the sections it belongs to.
   ========================================================================== */

/* ---------- ways to work together: all four services, 01-04 ---------- */
.smm__head{max-width:1080px}
.svc__item{
  position:relative;padding-block:clamp(1.8rem,3.5vw,2.6rem);border-top:1px solid rgba(61,37,0,.22);
  display:grid;grid-template-columns:3.2rem 1fr;column-gap:clamp(1rem,3vw,2.5rem);row-gap:.6rem;align-items:baseline;
}
.svc__item:last-child{border-bottom:1px solid rgba(61,37,0,.22)}
.svc-num{font-size:.72rem;letter-spacing:.3em;color:var(--olive);font-weight:500}
.svc__title{font-size:clamp(1.45rem,1.15rem + 1.2vw,2.1rem);font-weight:300;line-height:var(--lh-head)}
.svc__body{grid-column:2;color:rgba(61,37,0,.8);max-width:56ch}
.svc__price{font-style:italic;color:var(--brown)}
.svc__price strong{font-style:normal;font-weight:500}
/* social media management is the primary service: larger title, price set apart */
.svc__item--lead .svc__title{font-size:clamp(1.9rem,1.4rem + 1.9vw,2.9rem)}
.svc__item--lead .svc__price{
  display:inline-block;margin-top:1.3em;padding:.55em 1.1em;
  border:1px solid rgba(61,37,0,.26);border-radius:var(--r-sm);background:rgba(253,252,250,.45);
}
@media (min-width:900px){
  .svc__item{grid-template-columns:4.5rem .9fr 1.3fr}
  .svc__body{grid-column:3}
}

/* ---------- where to start ---------- */
.proc__over{font-size:clamp(1.9rem,1.35rem + 2vw,3rem);margin-bottom:.5em;color:var(--cocoa)}

/* the heart in Davis's copy. Neither script face carries the glyph. */
.heart{font-family:'Apple Symbols','Segoe UI Symbol','DejaVu Sans',sans-serif;font-size:.62em;vertical-align:.12em;line-height:0}
.btn .heart{font-size:1.25em;margin-left:.5em;vertical-align:0}

/* about carries three paragraphs now */
.about__grid{align-items:start}
@media (min-width:1000px){.about__art{position:sticky;top:7rem}}

/* let's talk carries a two-line title and a longer paragraph */
.invite{padding-block:clamp(4.5rem,9vw,7rem)}

/* ==========================================================================
   iPHONE STATUS BAR / DYNAMIC ISLAND
   viewport-fit=cover lets the page draw under the status bar, so the nav
   grows by the safe-area inset and owns that strip: a chocolate fade over
   the photograph, solid white once it solidifies. No page content can show
   above the nav any more. theme-color is kept in step by main.js.
   ========================================================================== */
html{background:var(--chocolate)}
.nav{padding-top:env(safe-area-inset-top,0px)}
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--scrim),.72) 0%,rgba(var(--scrim),.32) 60%,rgba(var(--scrim),0) 100%);
  transition:opacity .6s var(--ease);
}
.nav.is-solid::before,body.menu-open .nav::before{opacity:0}
.menu{padding-top:calc(clamp(8rem,20vh,11rem) + env(safe-area-inset-top,0px))}
.hero{overflow:hidden}

/* ==========================================================================
   MOTION
   ========================================================================== */

/* headings rise word by word (main.js wraps the words) */
.reveal.split{opacity:1;transform:none}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-block:.1em .14em;margin-block:-.1em -.14em}
.split .w > span{
  display:inline-block;transform:translateY(112%);
  transition:transform 1.15s var(--ease);transition-delay:calc(var(--i) * 42ms + 60ms);
}
.split.is-in .w > span{transform:none}

/* script and handwritten lines write themselves in, left to right */
.write{
  -webkit-mask-image:linear-gradient(90deg,#000 40%,transparent 60%);
          mask-image:linear-gradient(90deg,#000 40%,transparent 60%);
  -webkit-mask-size:260% 100%;mask-size:260% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:100% 0;mask-position:100% 0;
  transition:-webkit-mask-position 2s cubic-bezier(.45,.05,.3,1),mask-position 2s cubic-bezier(.45,.05,.3,1);
  padding:.2em .45em;margin-inline:-.45em;  /* room for the swashes; the vertical padding stays as real space so tails never touch a rule */
}
.write.is-in{-webkit-mask-position:0 0;mask-position:0 0}
.reveal.write{opacity:1;transform:none}

/* divider lines draw across as each row arrives */
.proc__item,.faq__item,.svc__item{border-top-color:transparent}
.proc__item,.faq__item{position:relative}
.proc__item::before,.faq__item::before,.svc__item::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--rule);
  transform:scaleX(0);transform-origin:left;transition:transform 1.5s var(--ease);
}
.proc__item.is-in::before,.faq__item.is-in::before,.svc__item.is-in::before{transform:none}
.rule{transform:scaleX(0);transition:transform 1.4s var(--ease) .3s}
.rule.is-in{transform:none}

/* cards and photographs answer the pointer */
@media (hover:hover){
  .about__tall img{transition:transform 1.6s var(--ease)}
  .about__tall:hover img{transform:scale(1.035)}
}

@media (prefers-reduced-motion:reduce){
  .split .w > span{transform:none}
  .write{-webkit-mask-image:none;mask-image:none}
  .rule,.proc__item::before,.faq__item::before,.svc__item::before{transform:none}
}

/* ==========================================================================
   2026-09-13 - v12: DAVIS'S REVIEW
   ========================================================================== */

/* one tighter line spacing for every multi-line heading on the site */
:root{--lh-head:1.06}
.hero__title,.hero__copy .hero__title,.h2,.invite__title,.phero__title{line-height:var(--lh-head)}
/* the mask spans get breathing room so tight lines never clip descenders */
.line{padding-block:.08em .18em;margin-block:-.08em -.18em}

/* hero: supporting copy runs across two lines on desktop */
.hero__copy{width:min(100%,1040px)}
.hero__copy .hero__sub{max-width:74ch}

/* hero CTA and nav button fade to DS Creative baby blue on hover */
.btn--hero,.nav .nav__cta{--bg:var(--blue);transition:color .5s ease,border-color .5s ease}
.btn--hero::after,.nav .nav__cta::after{transform:none;opacity:0;transition:opacity .5s ease}
.btn--hero:hover::after,.nav .nav__cta:hover::after{opacity:1}
.btn--hero:hover,.nav .nav__cta:hover{color:var(--brown);border-color:var(--blue)}

/* philosophy: heading on two lines, body on about three */
.intro__inner{max-width:var(--max)}
.intro .h2{max-width:26em}
.intro p{max-width:112ch}

/* notes keep their size and placement in Pinyon */
.note--invite{margin-top:1.4rem}

/* footer: follow block */
.foot__social{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .7rem;margin-bottom:1.1rem}
.foot__social span{color:rgba(243,238,228,.55)}
.foot__col .foot__hello{font-size:1.15rem;color:var(--white)}
.foot__base{justify-content:space-between}

/* motion stays subtle and never holds up reading */
.reveal{transition:opacity .75s var(--ease),transform .85s var(--ease)}
[data-d="1"]{transition-delay:.05s}
[data-d="2"]{transition-delay:.1s}
[data-d="3"]{transition-delay:.15s}
[data-d="4"]{transition-delay:.2s}
[data-d="5"]{transition-delay:.25s}
[data-d="6"]{transition-delay:.3s}
.split .w > span{transition-duration:.8s;transition-delay:calc(var(--i) * 24ms)}
.write{transition-duration:1.1s,1.1s}
.proc__item::before,.faq__item::before,.svc__item::before{transition-duration:1s}
.rule{transition:transform .9s var(--ease) .1s}
.line > span{transition-duration:1s}

/* footer credit: backlink to Arquilla Solutions (Sebastian, 2026-09-13) */
.foot__base a{color:rgba(243,238,228,.8);background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:.15em;transition:color .4s ease}
.foot__base a:hover{color:var(--white)}

/* footer v14: earlier three-column layout, "Have something in mind?" field (Davis, 2026-09-14) */
.foot__col .foot__social{margin:.35rem 0 0}
.foot__ask{font-size:clamp(1.35rem,1.15rem + .6vw,1.7rem);line-height:1.2;color:var(--white);margin-bottom:1rem}
.foot__form{position:relative;display:flex;align-items:center;gap:1rem;max-width:380px;border-bottom:1px solid rgba(243,238,228,.35);padding-bottom:.35rem}
.foot__form::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--cream);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.foot__form:focus-within::after{transform:scaleX(1)}
.foot__form input{flex:1;min-width:0;background:none;border:0;outline:none;font-size:max(16px,1.05rem);color:var(--white);padding:.45rem 0}
.foot__form input::placeholder{color:rgba(243,238,228,.45)}
.foot__form button{background:none;border:0;cursor:pointer;font-size:1.25rem;line-height:1;color:var(--cream);padding:.45rem .2rem;transition:transform .5s var(--ease)}
.foot__form button:hover,.foot__form button:focus-visible{transform:translateX(5px)}
.foot__status{font-size:.9rem;color:rgba(243,238,228,.7);margin-top:.9rem;max-width:40ch}
@media (prefers-reduced-motion:reduce){.foot__form::after,.foot__form button{transition:none}}

/* instagram tiles: the width/height attributes made the height definite, so aspect-ratio was ignored */
.gram__tile img{height:auto}

/* email picker: Gmail / Outlook / Yahoo / Mail app / copy (Sebastian, 2026-09-14)
   The dialog fills the screen so a click outside the panel lands on it. */
html:has(.mailpick[open]){overflow:hidden}
.mailpick{position:fixed;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;margin:0;padding:var(--gut) 16px;border:0;background:transparent;color:var(--ink);overflow:auto}
.mailpick[open]{display:flex;align-items:center;justify-content:center}
.mailpick::backdrop{background:rgba(46,27,2,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.mailpick__panel{position:relative;width:min(100%,430px);background:var(--white);border-radius:var(--r);padding:2.3rem 2rem 1.5rem;box-shadow:0 30px 80px -30px rgba(46,27,2,.5);animation:mailpickIn .55s var(--ease)}
.mailpick .eyebrow{margin-bottom:.6em}
.mailpick__addr{font-size:1.4rem;line-height:1.2;color:var(--brown);margin-bottom:1.3rem;overflow-wrap:anywhere}
.mailpick__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.mailpick__list li{border-bottom:1px solid var(--rule)}
.mailpick__list a,.mailpick__list button{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-height:52px;padding:.65rem 0;background:none;border:0;cursor:pointer;font-size:1.15rem;color:var(--brown);text-align:left;text-decoration:none;transition:color .35s ease,padding-left .45s var(--ease)}
.mailpick__list a::after{content:"\2192";color:var(--cocoa);transition:transform .45s var(--ease)}
.mailpick__list a:hover,.mailpick__list button:hover,.mailpick__list a:focus-visible,.mailpick__list button:focus-visible{color:var(--olive);padding-left:.4rem}
.mailpick__list a:hover::after,.mailpick__list a:focus-visible::after{transform:translateX(4px)}
.mailpick__done{min-height:1.5em;margin-top:.9rem;font-size:.95rem;color:var(--muted)}
.mailpick__close{position:absolute;top:.7rem;right:.8rem;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:none;font-size:1.7rem;line-height:1;color:var(--cocoa);cursor:pointer;transition:background .3s ease}
.mailpick__close:hover{background:var(--cream)}
@keyframes mailpickIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (max-width:599px){
  .mailpick[open]{align-items:flex-end;padding:0}
  .mailpick__panel{width:100%;border-radius:var(--r) var(--r) 0 0;padding:2.1rem 1.5rem calc(1.2rem + env(safe-area-inset-bottom))}
  @keyframes mailpickIn{from{transform:translateY(100%)}to{transform:none}}
}
@media (prefers-reduced-motion:reduce){.mailpick__panel{animation:none}.mailpick__list a,.mailpick__list button,.mailpick__list a::after{transition:none}}
.mailpick__panel:focus{outline:none}

/* v18: Davis's final formatting tweaks (2026-09-14). Line breaks are for desktop; mobile wraps naturally. */
.br-d{display:none}
@media (min-width:900px){.br-d{display:inline}}
.svc-num{font-family:var(--script);font-size:1.7rem;font-weight:400;letter-spacing:0;line-height:1;color:var(--olive)}
.invite__sub{max-width:72ch}
.note--invite{font-size:calc(.5 * clamp(1.45rem,1.2rem + .9vw,1.95rem));transform:rotate(-6deg);margin-top:1.2rem}
/* phones: half size fell to 11.6px, too small to read in Pinyon; keep a floor */
.note--invite{font-size:max(.9rem,calc(.5 * clamp(1.45rem,1.2rem + .9vw,1.95rem)))}

/* v20 (2026-09-14): Davis's last two changes before launch */
/* 1. "from the first hello to everything that follows" in Cormorant Garamond, like the other section headings */
.proc__over{font-family:var(--serif);font-weight:300;line-height:1.22;letter-spacing:-.012em}
/* 2. iPhone Dynamic Island. Safari 26 ignores theme-color and tints the status bar strip from a
   position:fixed element touching the top (or bottom) edge. The full-screen grain layer was that
   element, and its transparent background let the page show through above the solid nav. Pulling
   it a few px off both edges takes it out of the sampling, so Safari reads the nav instead. */
body::after{inset:5px 0 4px}
/* The closed mobile menu is fixed, full screen and white, so Safari could sample it and paint a white
   strip above the dark hero. Closed, it sits 5px down (invisible, it is clipped away); open, it takes the
   top edge back. The top change waits for the close animation so nothing jumps. */
.menu{top:5px;transition:clip-path .8s var(--ease),visibility 0s linear .8s,top 0s linear .8s}
body.menu-open .menu{top:0;transition-delay:0s,0s,0s}

/* v22 (Sebastian, 2026-09-14): hero banner a little longer. Was 92svh desktop, 60svh (max 560px) phones. */
.hero{min-height:clamp(600px,100svh,1080px)}
@media (max-width:699px){
  .hero{min-height:clamp(480px,72svh,700px)}
}