*{box-sizing:border-box}:root{--ink:#111;--line:#ddd9d2;--soft:#eee8dd}body{margin:0;color:var(--ink);font-family:Bahnschrift,"Arial Narrow",Arial,sans-serif}h1,h2{margin-top:0}header{display:grid;grid-template-columns:25% 75%;min-height:610px;border-bottom:1px solid var(--line)}.brand{background:#151515;color:#fff;padding:46px 36px;display:flex;flex-direction:column}.logo{font-size:clamp(72px,8vw,126px);font-weight:600;line-height:.9}.motto{margin-top:auto;font-size:31px;line-height:1.25}.modes{padding:52px 5vw}.modes h1{font-size:54px}.modecols{display:grid;grid-template-columns:1fr 1fr;gap:7vw;margin-top:45px}.modecols h2 span{color:#bbb}.row{display:grid;grid-template-columns:110px 1fr;gap:12px;margin:12px 0}.row b span{color:#bbb;font-weight:400}main{max-width:1500px;margin:auto;padding:0 5vw}.three{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}.three>div{padding:40px 4vw 40px 0}.three>div+div{border-left:1px solid var(--line);padding-left:4vw}.three a,button{background:#111;color:white;padding:14px 24px;text-decoration:none;border:0;font:inherit;cursor:pointer}.builder{display:grid;grid-template-columns:1.15fr .85fr;border-bottom:1px solid var(--line)}.builder>div{padding:44px 0}.your{padding-left:4vw!important;border-left:1px solid var(--line)}.top{display:flex;justify-content:space-between;gap:20px}.top input{display:block;width:75px;padding:9px}.activities{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:25px}.activity{min-height:105px;background:white;color:#111;border:1px solid var(--line);padding:14px;text-align:left}.activity:hover,.activity.on{background:var(--soft)}.activity i{display:block;font-size:25px;font-style:normal;margin-bottom:15px}.activity small{display:block;color:#777}.plan{min-height:170px}.item{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:13px 0;cursor:grab}.item small{display:block;color:#777}.remove{background:none;color:#111;padding:4px 8px;font-size:18px}.harder{display:flex;justify-content:space-between;align-items:center;border-block:1px solid var(--line);padding:18px 0}.harder small{display:block;color:#777}.price{display:grid;grid-template-columns:1fr 1fr;padding:22px 0}.price b{display:block;font-size:32px}.your>button{width:100%}.placeholder{padding:55px 0;border-bottom:1px solid var(--line)}footer{max-width:1500px;margin:auto;padding:34px 5vw;display:flex;flex-wrap:wrap;gap:35px}footer a{color:#111;text-decoration:none}@media(max-width:850px){header,.modecols,.three,.builder{grid-template-columns:1fr}.brand{min-height:420px}.three>div+div,.your{border-left:0;padding-left:0!important}.activities{grid-template-columns:repeat(3,1fr)}}@media(max-width:520px){.modes{padding:35px 22px}.modes h1{font-size:40px}main{padding:0 22px}.activities{grid-template-columns:repeat(2,1fr)}.row{grid-template-columns:90px 1fr}}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;margin-bottom:8px;color:#777}
.builder-hint{margin:-8px 0 0;color:#666}

.when{border-top:1px solid var(--line);padding:22px 0 8px}.when h3{margin:0 0 14px;font-size:18px}
.date-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.date-grid label{font-size:11px;font-weight:700;letter-spacing:.05em}
.date-grid input{display:block;width:100%;margin-top:7px;padding:11px;border:1px solid #bbb;background:#fff;font:inherit}
.flexible{display:block;margin-top:14px;font-size:12px;font-weight:700}.flexible input{margin-right:8px}
@media(max-width:520px){.date-grid{grid-template-columns:1fr}}

/* PHOTO PASS — intentionally keeps the original v1.3 frame, Bahnschrift,
   spacing, EASY/HARD header and builder untouched. */
.photo-three .intro-card{display:flex;flex-direction:column}
.intro-photo{height:220px;margin:-40px -4vw 30px 0;overflow:hidden;background:#eee}
.photo-three>div+div .intro-photo{margin-left:-4vw}
.intro-photo img{width:100%;height:100%;object-fit:cover;display:block}
.build-card .intro-photo img{object-position:center 45%}
.text-link{background:none!important;color:#111!important;padding:0!important;margin-top:auto;font-weight:700;border-bottom:1px solid #111;width:max-content}

.photo-story{padding:70px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:.62fr 1.38fr;gap:6vw;align-items:start}
.photo-story h2{font-size:clamp(42px,5vw,76px);line-height:.92;max-width:520px;margin:10px 0 24px}
.story-copy>p{max-width:390px;font-size:18px;line-height:1.45}
.story-copy .quiet{color:#777;font-size:14px}
.story-grid{display:grid;grid-template-columns:1.25fr .75fr;grid-template-rows:260px 260px;gap:12px}
.story-grid img{width:100%;height:100%;object-fit:cover;display:block}
.story-main{grid-row:1/3}

.place-strip{position:relative;margin:0 calc(50% - 50vw);height:min(76vh,760px);overflow:hidden;background:#111;color:#fff}
.place-strip>img{width:100%;height:100%;object-fit:cover;display:block}
.place-strip:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.08) 62%)}
.place-overlay{position:absolute;z-index:1;left:max(5vw,calc((100vw - 1500px)/2 + 5vw));bottom:8%;max-width:680px}
.place-overlay .eyebrow{color:#fff}
.place-overlay h2{font-size:clamp(42px,5vw,78px);line-height:.92;margin:12px 0 20px}
.place-overlay p{font-size:18px}

@media(max-width:850px){
 .intro-photo,.photo-three>div+div .intro-photo{margin:-40px 0 28px;height:300px}
 .photo-story{grid-template-columns:1fr}
 .story-grid{grid-template-columns:1fr 1fr;grid-template-rows:360px 220px}
 .story-main{grid-column:1/3;grid-row:auto}
}
@media(max-width:520px){
 .intro-photo,.photo-three>div+div .intro-photo{height:230px}
 .photo-story{padding:50px 0}
 .story-grid{grid-template-columns:1fr;grid-template-rows:auto}
 .story-main{grid-column:auto}
 .story-grid img{height:280px}
 .place-strip{height:70vh}
 .place-overlay{left:22px;right:22px}
}


/* =========================================================
   SIDEBAR TEST PASS
   Keeps the established Bahnschrift / graphic language.
   Desktop: long photo sidebar + content.
   Responsive: sidebar becomes a top hero block.
   ========================================================= */

.site-shell{
  display:grid;
  grid-template-columns:minmax(260px, 25vw) minmax(0,1fr);
  min-height:100vh;
}

.brand-sidebar{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  background:#151515;
  color:#fff;
  align-self:start;
}

.brand-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.brand-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.10) 36%,rgba(0,0,0,.62) 100%);
}

.brand-content{
  position:relative;
  z-index:1;
  height:100%;
  padding:42px 34px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.brand-sidebar .logo{
  font-size:clamp(58px,7vw,112px);
  font-weight:600;
  line-height:.88;
  letter-spacing:-.035em;
}

.brand-subtitle{
  margin-top:14px;
  font-size:13px;
  letter-spacing:.12em;
  font-weight:600;
}

.brand-sidebar .motto{
  margin:0;
  font-size:clamp(25px,2.3vw,38px);
  line-height:1.17;
  font-weight:600;
}

.site-content{
  min-width:0;
  background:#fff;
}

.content-header{
  display:block;
  min-height:0;
  border-bottom:1px solid var(--line);
}

.content-header .modes{
  padding:48px 5vw 52px;
}

.content-header .modes h1{
  font-size:clamp(40px,4vw,58px);
  margin-bottom:8px;
}

.content-header .modecols h2 span{
  color:#bbb;
  font-weight:600;
}

/* The original main/footer max-width should now use the content area,
   not the full browser width. */
.site-content main,
.site-content footer{
  max-width:none;
  width:100%;
}

/* Photo cards stay in the established 3-column frame. */
.photo-three{
  margin-top:0;
}
.photo-three .intro-photo{
  margin-top:0;
}

/* Remove the old header-grid behavior from the baseline. */
.site-shell > .site-content > header{
  display:block;
}


/* Responsive: image/sidebar becomes the first full-width hero. */
@media(max-width:850px){
  .site-shell{
    grid-template-columns:1fr;
  }
  .brand-sidebar{
    position:relative;
    height:min(72vh,620px);
    min-height:440px;
  }
  .brand-content{
    padding:34px 28px;
  }
  .brand-sidebar .logo{
    font-size:clamp(72px,18vw,120px);
  }
  .brand-sidebar .motto{
    font-size:clamp(28px,7vw,40px);
  }
  .content-header .modes{
    padding:42px 28px;
  }
}

@media(max-width:520px){
  .brand-sidebar{
    height:62vh;
    min-height:390px;
  }
  .brand-content{
    padding:26px 22px;
  }
  .brand-subtitle{
    font-size:11px;
  }
  .content-header .modes{
    padding:35px 22px;
  }
  .brand-sidebar::after{
    display:none;
  }
}


/* FIX: keep large THE PLACE image inside the right content column.
   The older full-viewport bleed used 100vw math, which made it slide
   underneath the sticky sidebar while scrolling. */
.site-content .place-strip{
  margin-left:0;
  margin-right:0;
  width:100%;
  max-width:100%;
}

.site-content{
  overflow:hidden;
}

@media(max-width:850px){
  .site-content{
    overflow:visible;
  }
}


/* =========================================================
   ICON / BUILDER PASS — moodboard-inspired line pictograms
   ========================================================= */

.line-icon{
  width:34px;
  height:34px;
  display:block;
  object-fit:contain;
}

/* ACTIVITIES: remove "app card" look; make them feel like pictograms. */
.activities{
  grid-template-columns:repeat(5,minmax(68px,1fr));
  gap:18px 10px;
  align-items:start;
}

.activity{
  min-height:78px;
  border:0;
  background:transparent;
  color:#111;
  padding:6px 4px 8px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:7px;
  position:relative;
}

.activity .line-icon{
  width:38px;
  height:38px;
}

.activity b{
  font-size:10px;
  line-height:1;
  letter-spacing:.02em;
}

.activity:hover{
  background:transparent;
}

.activity.on{
  background:transparent;
}

.activity.on::before{
  content:"";
  position:absolute;
  width:54px;
  height:54px;
  top:-2px;
  left:50%;
  transform:translateX(-50%);
  border-radius:50%;
  background:var(--soft);
  z-index:0;
}

.activity.on .line-icon,
.activity.on b{
  position:relative;
  z-index:1;
}

/* YOUR TÖÖK: selected activities become round tokens with + separators. */
.plan{
  min-height:150px;
}

.plan-tokens{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:10px 5px;
  padding:4px 0 20px;
}

.plan-token{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:67px;
  cursor:grab;
}

.token-circle{
  width:54px;
  height:54px;
  border-radius:50%;
  background:var(--soft);
  display:grid;
  place-items:center;
}

.token-circle .line-icon{
  width:30px;
  height:30px;
}

.plan-token b{
  margin-top:7px;
  font-size:9px;
  line-height:1.05;
  text-align:center;
}

.plan-plus{
  font-size:22px;
  line-height:54px;
  font-weight:400;
}

.token-remove{
  position:absolute;
  z-index:2;
  top:-7px;
  right:1px;
  width:19px;
  height:19px;
  padding:0;
  border-radius:50%;
  background:#111;
  color:#fff;
  font:14px/18px Arial,sans-serif;
  opacity:0;
  transition:opacity .15s ease;
}

.plan-token:hover .token-remove{
  opacity:1;
}

.plan-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:18px;
  padding:14px 0 6px;
  border-top:1px solid var(--line);
}

.plan-meta>span{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  white-space:nowrap;
}

.plan-meta .line-icon{
  width:22px;
  height:22px;
}

.plan-empty{
  color:#999;
  margin:18px 0 35px;
}

/* Current hard/easy control keeps the business logic but uses locked MOOD language. */
.harder small{
  max-width:220px;
}

@media(max-width:1100px){
  .activities{grid-template-columns:repeat(4,1fr)}
}

@media(max-width:850px){
  .activities{grid-template-columns:repeat(5,1fr)}
  .token-remove{opacity:1}
}

@media(max-width:520px){
  .activities{grid-template-columns:repeat(3,1fr);gap:16px 8px}
  .activity .line-icon{width:36px;height:36px}
  .plan-meta{gap:12px}
}


/* =========================================================
   V2 — DO / EAT / ADD + locked TÖÖK palette
   Unselected = bare black line icon.
   Selected = category colour circle.
   ========================================================= */
:root{
  --took-black:#1B1B1B;
  --took-paper:#F7F4EF;
  --took-do:#6B6F5B;
  --took-eat:#B35A38;
  --took-add:#D2B48C;
}

.activities{
  display:block;
}

.activity-group{
  margin:0 0 23px;
}

.activity-group-title{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
}

.activity-group-title i{
  height:1px;
  flex:1;
  background:var(--line);
}

.activity-group-do .activity-group-title span{color:var(--took-do)}
.activity-group-eat .activity-group-title span{color:var(--took-eat)}
.activity-group-add .activity-group-title span{color:#a87b45}

.activity-group-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(58px,1fr));
  gap:10px 8px;
}

.activity{
  min-height:72px;
  padding:3px 2px 6px;
  gap:5px;
}

.activity-icon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:transparent;
  transition:background .15s ease, transform .15s ease;
}

.activity .line-icon{
  width:38px;
  height:38px;
}

.activity.on::before{
  display:none !important;
}

.activity.on[data-category="do"] .activity-icon{background:var(--took-do)}
.activity.on[data-category="eat"] .activity-icon{background:var(--took-eat)}
.activity.on[data-category="add"] .activity-icon{background:var(--took-add)}

.activity.on[data-category="do"] .line-icon,
.activity.on[data-category="eat"] .line-icon{
  filter:brightness(0) invert(1);
}

.activity.on[data-category="add"] .line-icon{
  filter:none;
}

.activity:hover .activity-icon{
  transform:translateY(-1px);
}

/* Selected plan tokens repeat the same category code. */
.plan-do .token-circle{background:var(--took-do)}
.plan-eat .token-circle{background:var(--took-eat)}
.plan-add .token-circle{background:var(--took-add)}

.plan-do .line-icon,
.plan-eat .line-icon{
  filter:brightness(0) invert(1);
}
.plan-add .line-icon{filter:none}

@media(max-width:1100px){
  .activity-group-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:850px){
  .activity-group-grid{grid-template-columns:repeat(5,1fr)}
}
@media(max-width:520px){
  .activity-group-grid{grid-template-columns:repeat(3,1fr)}
}


/* V3 PNG ICON PASS — agreed hand-drawn icon family */
.activity-png{
  object-fit:contain;
  image-rendering:auto;
}
.activity .activity-png{
  width:44px;
  height:44px;
}
.token-circle .activity-png{
  width:32px;
  height:32px;
}

/* Unselected icons stay as pure black line drawings on no background. */
.activity:not(.on) .activity-png{
  filter:none;
}

/* All selected activity icons keep the same black line art. */
.activity.on .activity-png,
.plan-token .activity-png{
  filter:none;
}


/* V4: selected icons are black across DO / EAT / ADD. */
.activity.on[data-category="do"] .line-icon,
.activity.on[data-category="eat"] .line-icon,
.activity.on[data-category="add"] .line-icon,
.plan-do .line-icon,
.plan-eat .line-icon,
.plan-add .line-icon{filter:none !important;}


/* =========================================================
   V7 — selected-list + active coloured icon pass
   ========================================================= */

/* Small, moodboard-like corner radius across buttons/controls. */
button,
.three a,
.send,
input,
.harder{
  border-radius:3px;
}

/* Picker stays sparse: inactive = outline PNG, active = approved coloured artwork. */
.activity-icon{
  background:transparent !important;
}
.activity.on[data-category="do"] .activity-icon,
.activity.on[data-category="eat"] .activity-icon,
.activity.on[data-category="add"] .activity-icon{
  background:transparent !important;
}
.activity .active-png{
  width:54px;
  height:54px;
  object-fit:contain;
  filter:none !important;
}
.activity .activity-png{
  filter:none !important;
}

/* YOUR TÖÖK — vertical rows, no pluses. */
.selected-list{
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--line);
}

.selected-row{
  display:grid;
  grid-template-columns:66px minmax(0,1fr) 26px;
  align-items:center;
  gap:14px;
  min-height:92px;
  padding:13px 0;
  border-bottom:1px solid var(--line);
  cursor:grab;
}

.selected-row.dragging{
  opacity:.45;
}

.selected-icon{
  width:60px;
  height:60px;
  display:grid;
  place-items:center;
}

.selected-icon .active-png{
  width:60px;
  height:60px;
  object-fit:contain;
}

.selected-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.selected-copy b{
  font-size:15px;
  line-height:1.05;
}

.selected-copy span{
  color:#666;
  font-size:12px;
  line-height:1.3;
}

.selected-remove{
  align-self:start;
  margin-top:8px;
  width:24px;
  height:24px;
  padding:0;
  border:0;
  background:transparent;
  color:#111;
  font:700 18px/22px Arial,sans-serif;
  cursor:pointer;
}

/* Meta information remains below the chosen list. */
.plan-meta{
  margin-top:14px;
}

/* Send treatment. */
.send{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.send-plane{
  display:inline-block;
  font-size:19px;
  transform:rotate(-18deg);
  line-height:1;
}
.send-note{
  margin-top:10px;
  text-align:center;
  color:#777;
  font-size:11px;
  line-height:1.35;
}
.send-note span{
  color:#999;
}

@media(max-width:520px){
  .selected-row{
    grid-template-columns:56px minmax(0,1fr) 24px;
    gap:10px;
    min-height:82px;
  }
  .selected-icon,
  .selected-icon .active-png{
    width:52px;
    height:52px;
  }
}

/* V8 — remove embedded duplicate icon labels + larger paper-plane send icon. */
#send{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}
#send .send-plane{
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 38px;
  transform:none;
  font-size:0;
  line-height:1;
}
#send .send-plane svg{
  width:100%;
  height:100%;
  display:block;
}

/* V9 — icon rendering fix. Keep every pictogram inside its own safe box;
   no image generation / no cropping tricks. */
.activity,
.activity-icon,
.selected-icon{
  overflow:visible;
}

.activity{
  min-height:84px;
}

.activity-icon{
  width:58px;
  height:58px;
  flex:0 0 58px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.activity .activity-png{
  width:48px;
  height:48px;
  max-width:48px;
  max-height:48px;
  object-fit:contain;
  object-position:center;
  display:block;
}

.activity .active-png{
  width:58px;
  height:58px;
  max-width:58px;
  max-height:58px;
  object-fit:contain;
  object-position:center;
  display:block;
}

.selected-icon{
  width:64px;
  height:64px;
}

.selected-icon .active-png{
  width:64px;
  height:64px;
  max-width:64px;
  max-height:64px;
  object-fit:contain;
  object-position:center;
  display:block;
}

@media(max-width:520px){
  .activity-icon{width:54px;height:54px;flex-basis:54px}
  .activity .activity-png{width:44px;height:44px;max-width:44px;max-height:44px}
  .activity .active-png{width:54px;height:54px;max-width:54px;max-height:54px}
  .selected-icon,.selected-icon .active-png{width:56px;height:56px;max-width:56px;max-height:56px}
}

/* V13 — source PNGs normalized instead of CSS scaling.
   ADD active circles now use the same artwork bounds as DO/EAT;
   MAKE scissors were given more breathing room inside the source icon. */

/* V15 — people control + MAKE icon safety margin */
.top label{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  font-size:12px;
  line-height:1;
  font-weight:700;
  letter-spacing:.02em;
}
.top #people{
  width:58px;
  padding:2px 0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--ink);
  font:700 24px/1 Bahnschrift,"Arial Narrow",Arial,sans-serif;
  outline:none;
}
.top #people:focus{
  box-shadow:none;
  outline:none;
}
.top #people::-webkit-inner-spin-button,
.top #people::-webkit-outer-spin-button{
  opacity:1;
  cursor:pointer;
}

/* V16 — hard-mode checkbox + extra-safe inactive MAKE scissors. */
.harder > label{
  display:flex;
  align-items:center;
  gap:7px;
  font-weight:700;
  cursor:pointer;
}
#hardMode{
  -webkit-appearance:none;
  appearance:none;
  width:22px;
  height:22px;
  margin:0;
  border:2px solid #111;
  border-radius:3px;
  background:#fff;
  display:grid;
  place-content:center;
  cursor:pointer;
}
#hardMode::before{
  content:"";
  width:11px;
  height:6px;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(-45deg) translateY(-1px);
  opacity:0;
}
#hardMode:checked{
  background:#111;
  border-color:#111;
}
#hardMode:checked::before{
  opacity:1;
}
#hardMode:focus-visible{
  outline:2px solid #111;
  outline-offset:2px;
}


/* V17 — real TÖÖK logo in sidebar header + final MAKE scissors asset. */
.sidebar-logo{
  display:block;
  width:min(100%,220px);
  height:auto;
  filter:invert(1);
}
@media(max-width:850px){
  .sidebar-logo{width:min(62vw,260px)}
}
@media(max-width:520px){
  .sidebar-logo{width:min(68vw,235px)}
}


/* v19 — connected request form */
.contact-block{border-top:1px solid rgba(0,0,0,.14);margin-top:22px;padding-top:20px}.contact-block h3{font-size:13px;letter-spacing:.04em;margin:0 0 12px}.booking-type{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:13px}.booking-type-btn{appearance:none;border:1.5px solid #111;background:transparent;color:#111;border-radius:6px;padding:11px 12px;font:inherit;font-size:12px;font-weight:900;letter-spacing:.04em;cursor:pointer}.booking-type-btn.on{background:#111;color:#fff}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.contact-grid label{font-size:10px;font-weight:900;letter-spacing:.04em}.contact-grid label span{font-weight:600;opacity:.55}.contact-grid label.full{grid-column:1/-1}.contact-grid input{width:100%;box-sizing:border-box;border:0;border-bottom:1.5px solid #111;background:transparent;border-radius:0;padding:8px 0 7px;font:inherit;font-size:14px;outline:none}.contact-grid input:focus{border-bottom-width:2.5px}.company-fields{margin-top:16px}.tax-note{font-size:11px;line-height:1.45;margin:14px 0 0;padding:12px;border:1px solid rgba(0,0,0,.16);border-radius:8px}.hidden{display:none!important}#send:disabled{opacity:.55;cursor:default}#out{min-height:20px;font-size:12px;line-height:1.4}
@media(max-width:720px){.contact-grid{grid-template-columns:1fr}.contact-grid label.full{grid-column:auto}}


/* V21 — people is the first builder input; activities stay visually unchanged. */
.top #people{width:112px;min-width:112px}
.top #people::placeholder{color:#777;opacity:1;font-size:18px;font-weight:600}
.people-prompt{display:block;min-height:14px;margin-top:4px;font-size:10px;line-height:1.2;font-weight:700;letter-spacing:0;color:#111;white-space:nowrap}
.top #people.needs-attention{border-bottom:2px solid #111}

/* V22 — PEOPLE sits directly below the builder question. */
.top{display:block}
.top .people-first{margin:14px 0 12px}
.top .builder-hint{margin:0}

/* V24 — content photography monochrome by default, colour on interaction.
   Sidebar intentionally excluded. */
.site-content .intro-photo img,
.site-content .story-grid img,
.site-content .place-strip > img {
  filter: grayscale(100%);
  transition: filter .38s ease;
}
.site-content .intro-photo:hover img,
.site-content .intro-photo:focus-within img,
.site-content .story-grid img:hover,
.site-content .story-grid img:focus,
.site-content .place-strip:hover > img,
.site-content .place-strip:focus-within > img {
  filter: grayscale(0%);
}

/* PEOPLE is typed directly; hide browser number steppers. */
.top #people {
  appearance: textfield;
  -moz-appearance: textfield;
}
.top #people::-webkit-inner-spin-button,
.top #people::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
  opacity: 0;
  display: none;
}

/* v26 brand cleanup: teaser copy is deliberately quieter than headings/CTAs. */
.photo-three .intro-card-place > p,
.photo-three .intro-card-story > p {
  color:#777;
  font-weight:300;
}


/* V28 — configurable photography uses colour placeholders, never packaged fallback photos. */
.brand-sidebar { background:#7d765f; }
.intro-card:nth-child(1) .intro-photo { background:#b7ad91; }
.intro-card:nth-child(2) .intro-photo { background:#8d9177; }
.intro-card:nth-child(3) .intro-photo { background:#a66f55; }
.story-grid { background:#d0c5ad; }
.story-grid > img:nth-child(2) { background:#aaa58e; }
.story-grid > img:nth-child(3) { background:#b9785f; }
.place-strip { background:#696b5d; }

[data-content-key] {
  opacity:0;
  transition:opacity .35s ease, filter .38s ease;
}
[data-content-key].is-loaded { opacity:1; }

/* Keep the established B&W → colour interaction after the cloud image has loaded. */
.site-content .intro-photo img.is-loaded,
.site-content .story-grid img.is-loaded,
.site-content .place-strip > img.is-loaded { filter:grayscale(100%); }
.site-content .intro-photo:hover img.is-loaded,
.site-content .intro-photo:focus-within img.is-loaded,
.site-content .story-grid img.is-loaded:hover,
.site-content .story-grid img.is-loaded:focus,
.site-content .place-strip:hover > img.is-loaded,
.site-content .place-strip:focus-within > img.is-loaded { filter:grayscale(0%); }