/* ===============================================================
   DARKROOM
   Shared stylesheet for every page.

   The :root block below is the entire re-skin surface. To rebrand
   a client site, change these values and swap the photographs.
   No page hardcodes a colour, a font, or a size.
   =============================================================== */

:root{
  /* Surfaces */
  --ink:#241c14;           /* deep brown, dark sections */
  --paper:#f2ede1;         /* cream, light sections */
  --paper-deep:#e8e0ce;    /* recessed cream, form panels */
  --forest:#2f3d29;        /* green, call-to-action sections */
  --forest-ink:#2b3625;

  /* Type colours on dark */
  --on-dark:#f5f0e4;
  --on-dark-soft:#b3a897;
  --on-dark-mute:#9c8f7c;
  --on-dark-faint:#8b7f6d;
  --on-dark-lede:#bdb1a0;
  --on-dark-nav:#cfc4b2;

  /* Type colours on light */
  --on-light:#241c14;
  --on-light-soft:#5f584d;
  --on-light-mute:#8a8375;

  /* Type colours on green */
  --on-green:#c2cbb9;
  --on-green-mute:#9aa78d;
  --on-green-label:#a3b096;

  /* Gold, three steps */
  --gold:#c2933f;          /* hover */
  --gold-bright:#e0b25f;   /* accent on dark */
  --gold-deep:#a3813c;     /* accent on light */

  /* Rules */
  --rule-light:#d8cfba;
  --rule-light-2:#ddd4bf;
  --rule-field:#c4b9a2;
  --rule-dark:rgba(242,237,225,0.18);
  --rule-dark-faint:rgba(242,237,225,0.10);

  /* Type */
  --display:'EB Garamond',Georgia,serif;
  --sans:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --hand:'Caveat',cursive;

  /* Rhythm */
  --gutter:clamp(20px,6vw,120px);
  --max:1500px;
}

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

html{scroll-behavior:smooth}

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

a{color:inherit;text-decoration:none;transition:color .18s,background-color .18s,border-color .18s}
img{display:block;max-width:100%}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}

/* Skip link, for keyboard and screen reader users */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--paper);color:var(--ink);padding:12px 20px;font-size:14px;
}
.skip:focus{left:0}

/* ---------------------------------------------------------------
   HEADER
   --------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:50;background:var(--ink);
  border-bottom:1px solid rgba(239,233,220,0.07);
  display:flex;flex-wrap:wrap;gap:10px 24px;
  align-items:center;justify-content:space-between;
  padding:18px var(--gutter);
}
.brand{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;min-width:0}
.brand__mark{
  font-family:var(--display);font-style:italic;font-size:22px;
  color:var(--paper);white-space:nowrap;letter-spacing:.01em;
}
.brand__desc{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dark-faint);
}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px clamp(14px,2.2vw,34px)}
.nav a{font-size:14.5px;color:var(--on-dark-nav)}
.nav a:hover{color:var(--gold)}
.nav a[aria-current="page"]{color:var(--gold-bright)}

/* ---------------------------------------------------------------
   SECTIONS
   --------------------------------------------------------------- */
.sec{padding:clamp(70px,9vw,130px) var(--gutter)}
.sec--dark{background:var(--ink);color:var(--on-dark)}
.sec--paper{background:var(--paper);color:var(--ink)}
.sec--deep{background:var(--paper-deep);color:var(--ink)}
.sec--forest{background:var(--forest);color:var(--paper)}
.sec--tall{padding:clamp(80px,10vw,150px) var(--gutter)}
.sec--short{padding:clamp(40px,5.5vw,76px) var(--gutter)}
.sec--flush-top{padding-top:0}
.wrap{max-width:var(--max);margin:0 auto;width:100%}
.wrap--narrow{max-width:900px}
.wrap--centre{max-width:780px;margin:0 auto;text-align:center}

/* ---------------------------------------------------------------
   TYPE
   --------------------------------------------------------------- */
.eyebrow{
  margin:0 0 22px;font-size:12.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--on-dark-mute);
}
.sec--paper .eyebrow,.sec--deep .eyebrow{color:var(--on-light-mute)}
.sec--forest .eyebrow{color:var(--on-green-label)}

.display{
  margin:0;font-family:var(--display);font-style:italic;font-weight:400;
  line-height:1.12;text-wrap:pretty;
}
.display--xl{font-size:clamp(40px,5.6vw,80px);line-height:1.08}
.display--lg{font-size:clamp(36px,4.8vw,68px);line-height:1.1}
.display--md{font-size:clamp(30px,4.2vw,54px);line-height:1.14}
.display--sm{font-size:clamp(27px,3.2vw,42px);line-height:1.16}
.display--xs{font-size:clamp(22px,2.3vw,30px);line-height:1.22}

.sec--dark .display,.sec--dark .display--xl{color:var(--on-dark)}
.sec--forest .display{color:var(--paper)}

.lede{margin:28px 0 0;max-width:34em;font-size:16.5px;line-height:1.75;color:var(--on-dark-lede)}
.sec--paper .lede,.sec--deep .lede{color:var(--on-light-soft)}

.prose{display:flex;flex-direction:column;gap:20px;max-width:36em;min-width:0}
.prose p{margin:0;font-size:16px;line-height:1.75;color:var(--on-dark-soft)}
.sec--paper .prose p,.sec--deep .prose p{color:var(--on-light-soft)}
.sec--forest .prose p{color:var(--on-green)}

/* A sentence lifted out of the paragraph flow. */
.pull{
  margin:0;font-family:var(--display);font-style:italic;
  font-size:clamp(20px,2.1vw,27px);line-height:1.38;color:var(--on-dark);
}
.sec--paper .pull,.sec--deep .pull{color:var(--ink)}

/* Handwriting. Reserved for the most personal line on a page. */
.hand{margin:0;font-family:var(--hand);font-size:26px;line-height:1.4;color:var(--gold-deep)}
.sec--dark .hand,.sec--forest .hand{color:var(--gold-bright)}

/* ---------------------------------------------------------------
   GRIDS
   --------------------------------------------------------------- */
.grid{display:grid;gap:clamp(36px,6vw,90px);align-items:start}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr))}
.grid--2-wide{grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:clamp(30px,4vw,60px)}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr));gap:clamp(24px,2.4vw,36px)}
.grid--centre{align-items:center}
.grid--end{align-items:end}
.sticky{position:sticky;top:104px}

/* ---------------------------------------------------------------
   BUTTONS
   --------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:11px;
  font-size:15.5px;padding:17px 30px;border:0;cursor:pointer;
  font-family:var(--sans);
}
.btn__arrow{font-size:13px}
.btn--cream{background:var(--paper);color:var(--ink)}
.btn--cream:hover{background:var(--gold);color:var(--ink)}
.sec--forest .btn--cream{color:var(--forest-ink)}
.sec--forest .btn--cream:hover{background:var(--gold-bright)}
.btn--ink{background:var(--ink);color:var(--paper)}
.btn--ink:hover{background:var(--gold);color:var(--ink)}
.btn--outline{border:1px solid rgba(242,237,225,0.4);color:var(--paper);padding:15px 26px;font-size:15px}
.btn--outline:hover{background:var(--paper);color:var(--forest-ink)}
.btn--nav{font-size:14.5px;font-weight:600;padding:11px 20px;gap:8px;background:var(--paper);color:var(--ink)}
.btn--nav:hover{background:var(--gold);color:var(--ink)}

/* Underlined text link with an arrow. */
.link-quiet{
  display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  border-bottom:1px solid rgba(242,237,225,0.35);padding-bottom:6px;
  font-size:15px;color:var(--gold-bright);
}
.link-quiet:hover{border-bottom-color:var(--gold-bright);color:var(--gold-bright)}
.link-plain{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;color:var(--on-light-soft)}
.link-plain:hover{color:var(--gold)}

/* ---------------------------------------------------------------
   IMAGES
   Pan is reproduced with object-position. If a crop looks off,
   change the second percentage on that image and nothing else.
   --------------------------------------------------------------- */
.frame{position:relative;width:100%;min-width:0;overflow:hidden}
.frame img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.frame--4x3{aspect-ratio:4/3}
.frame--4x5{aspect-ratio:4/5}
.frame--3x4{aspect-ratio:3/4}
.frame--16x9{aspect-ratio:16/9}
.frame--1x1{aspect-ratio:1/1;max-height:520px}

/* Tone. Warm sepia, matching the prototype. */
.tone-warm{filter:sepia(.4) contrast(.95)}
.tone-hero{filter:sepia(.42) contrast(.9) brightness(.97) saturate(.85)}
.tone-soft{filter:sepia(.25) brightness(.95)}
.tone-dim{filter:sepia(.2) brightness(.85)}
.tone-mid{filter:sepia(.35) contrast(.96)}

/* TEMPORARY. proc-2.webp is a Shutterstock comp with a watermark band
   across the bottom of the source file. Scaling from the top pushes that
   band out of frame. This hides the watermark, it does not license the
   image. Replace the photograph and delete this rule. */
.crop-bottom img{transform:scale(1.16);transform-origin:top center}

/* Quote card, deliberately hung off the corner of a photograph. */
.quote-card{
  position:absolute;left:-24px;bottom:-34px;
  background:var(--forest);padding:24px 26px;max-width:230px;
}
.quote-card p{margin:0;font-family:var(--hand);font-size:22px;line-height:1.5;color:var(--gold-bright)}

/* ---------------------------------------------------------------
   PARTS
   --------------------------------------------------------------- */
.rule-top{border-top:1px solid var(--rule-dark);padding-top:30px}
.sec--paper .rule-top,.sec--deep .rule-top{border-top-color:var(--rule-light)}
.sec--forest .rule-top{border-top-color:rgba(242,237,225,0.22)}
.rule-bottom{border-bottom:1px solid var(--rule-dark);padding-bottom:clamp(34px,4vw,48px)}

/* Centred label with hairlines either side. */
.flourish{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:34px}
.flourish span:first-child{height:1px;width:clamp(40px,10vw,90px);background:linear-gradient(90deg,transparent,#c3b8a2)}
.flourish span:last-child{height:1px;width:clamp(40px,10vw,90px);background:linear-gradient(270deg,transparent,#c3b8a2)}
.flourish__label{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--on-light-mute)}

.tags{display:flex;flex-wrap:wrap;gap:12px;list-style:none;margin:0;padding:0}
.tags li{border:1px solid rgba(242,237,225,0.2);padding:11px 17px;font-size:14.5px;color:#d6cbb9}

/* The translation table. Muted left, lit right. */
.translate{min-width:0}
.translate__head,.translate__row{
  display:grid;grid-template-columns:1fr 1fr;gap:6px clamp(16px,3vw,40px);
}
.translate__head{
  border-bottom:1px solid rgba(242,237,225,0.2);padding-bottom:14px;
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
}
.translate__head span:first-child{color:var(--on-dark-faint)}
.translate__head span:last-child{color:var(--gold-bright)}
.translate__row{border-bottom:1px solid rgba(242,237,225,0.12);padding:18px 0}
.translate__says{font-size:15.5px;line-height:1.5;color:var(--on-dark-faint)}
.translate__types{font-family:var(--display);font-style:italic;font-size:19px;line-height:1.4;color:var(--on-dark)}
.footnote{margin:16px 0 0;font-size:12.5px;line-height:1.6;color:var(--on-dark-faint)}

/* Numbered step cards. */
.step-num{margin:0;font-family:var(--display);font-size:32px;line-height:1;color:#c9c0ab}
.step-num--big{font-size:clamp(46px,5vw,66px);color:#cfc5b0}
.step-title{margin:16px 0 0;font-family:var(--display);font-style:italic;font-weight:400;font-size:22px;color:var(--ink)}
.step-body{margin:16px 0 0;font-size:15px;line-height:1.7;color:var(--on-light-soft)}
.duration{font-size:11.5px;letter-spacing:.08em;color:var(--on-light-mute);border:1px solid #d2c9b3;padding:5px 10px}
.ticks{margin:28px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.ticks li{display:flex;align-items:baseline;gap:12px;font-size:14.5px;color:var(--on-light-soft)}
.ticks li::before{content:"\25CF";color:var(--gold);font-size:11px}

/* Offer numbering on the services page. */
.offer-label{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.offer-label span{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--on-dark-mute)}
.sec--paper .offer-label span{color:var(--on-light-mute)}

.price{margin:0;font-family:var(--display);font-size:34px;line-height:1;color:var(--gold-deep)}
.sec--dark .price,.sec--forest .price{color:var(--gold-bright)}
.price-note{margin:8px 0 0;font-size:13.5px;color:var(--on-light-mute)}
.price-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px}
.price-row span{font-size:14.5px;line-height:1.6;color:#6b6456}

/* Jump index. */
.index{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(18px,3vw,52px)}
.index a{display:flex;align-items:baseline;gap:12px;padding:14px 0;border-bottom:1px solid transparent}
.index a:hover{border-bottom-color:var(--gold)}
.index__num{font-size:12px;letter-spacing:.18em;color:#9a8f79}
.index__name{font-family:var(--display);font-style:italic;font-size:21px;color:#3a3125}

.list-rows>div{padding:13px 0;border-bottom:1px solid rgba(242,237,225,0.16);font-size:15px;line-height:1.5;color:var(--on-green)}

.faq h3{margin:0;font-family:var(--display);font-style:italic;font-weight:400;font-size:21px;line-height:1.3;color:var(--on-dark)}
.faq p{margin:14px 0 0;font-size:15px;line-height:1.7;color:var(--on-dark-soft)}

.fact p:first-child{margin:0;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--on-light-mute)}
.fact p:last-child{margin:7px 0 0;font-size:15.5px;line-height:1.6;color:#3a3125}

/* ---------------------------------------------------------------
   FORM
   --------------------------------------------------------------- */
.form{display:flex;flex-direction:column;gap:20px}
.form__panel{background:var(--paper-deep);padding:clamp(24px,3.5vw,44px);min-width:0}
.form__pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:20px}
.form label{display:flex;flex-direction:column;gap:9px}
.form label>span{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:#6b6456}
.form input,.form select,.form textarea{
  background:transparent;border:0;border-bottom:1px solid var(--rule-field);
  padding:9px 0;font-size:16px;color:var(--ink);
  font-family:var(--sans);border-radius:0;
}
.form textarea{line-height:1.6;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-bottom-color:var(--gold-deep)}
.form ::placeholder{color:#a39a88}
.form button{align-self:flex-start;margin-top:8px}
/* Spam honeypot. Hidden from people, visible to bots. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------- */
.site-footer{
  background:var(--ink);padding:clamp(40px,5vw,60px) var(--gutter);
  display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;
  border-top:1px solid rgba(242,237,225,0.08);
}
.site-footer .brand__mark{font-size:20px}
.site-footer span:last-child{font-size:13.5px;color:var(--on-dark-faint)}

/* ---------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------- */
/* Process steps alternate image left and right on wide screens.
   Once they stack, the text should always come first. */
@media(max-width:820px){
  .proc-flip{order:2}
}

@media(max-width:760px){
  .quote-card{left:0;bottom:-24px;max-width:200px;padding:18px 20px}
  .sticky{position:static}
  .brand__desc{display:none}
}