@charset "UTF-8";
:root {
  --paper:#ffffff;
  --white:#ffffff;
  --ink:#171717;
  --muted:#595959;
  --line:#cccccc;
  --orange:#b32025;
  --peach:#ffffff;
  --yellow:#ffffff;
  --green:#171717;
  --gutter:clamp(24px,5.5vw,94px)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:auto;
  scroll-padding-top:30px
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Yu Gothic",Meiryo,sans-serif;
  font-size:16px;
  line-height:1.95;
  -webkit-font-smoothing:antialiased
}

h1,h2,h3,p,figure {
  margin:0
}

h1,h2,h3 {
  line-height:1.5;
  font-weight:700;
  letter-spacing:.025em
}

a {
  color:inherit;
  text-underline-offset:5px
}

button {
  font:inherit;
  color:inherit
}

button,a,summary {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer
}

a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid var(--orange);
  outline-offset:5px
}

img,svg {
  max-width:100%
}

button[hidden],[hidden] {
  display:none!important
}

.skip {
  position:absolute;
  top:-100px;
  left:12px;
  padding:10px 20px;
  background:var(--white);
  z-index:50
}

.skip:focus {
  top:8px
}

.mobile-only {
  display:none
}

.masthead {
  display:flex;
  align-items:center;
  gap:30px;
  padding:32px var(--gutter);
  max-width:1700px;
  margin:auto;
  position:relative;
  z-index:10
}

.brand {
  display:flex;
  align-items:baseline;
  font:900 28px/1 Arial,sans-serif;
  letter-spacing:-1.6px;
  text-decoration:none;
  white-space:nowrap
}

.brand>span:last-child {
  margin-left:7px
}

.brand-period {
  color:var(--orange)
}

.desktop-links {
  display:flex;
  gap:28px;
  margin-left:auto;
  font-size:14px;
  font-weight:bold
}

.desktop-links a {
  text-decoration:none
}

.desktop-links a:hover {
  text-decoration:underline
}

.header-talk {
  font-size:14px;
  display:inline-flex;
  align-items:center;
  gap:22px;
  text-decoration:none;
  border-bottom:1px solid var(--ink);
  padding:5px 0;
  white-space:nowrap
}

.header-talk span {
  font-size:24px;
  line-height:1
}

.mobile-menu {
  display:none
}

.opening {
  position:relative;
  padding:48px var(--gutter) 0;
  max-width:1700px;
  margin:auto
}

.opening-kicker {
  font-size:14px;
  letter-spacing:.05em;
  margin-bottom:45px
}

.opening-grid {
  display:grid;
  grid-template-columns:1.8fr 1fr;
  gap:10px;
  align-items:center
}

.opening h1 {
  font-size:clamp(38px,5.9vw,96px);
  font-weight:800;
  line-height:1.62;
  letter-spacing:.005em;
  white-space:nowrap;
  margin:0 0 37px
}

.find-word {
  position:relative
}

.find-word svg {
  position:absolute;
  bottom:-8px;
  left:0;
  width:100%;
  height:22px;
  overflow:visible;
  stroke:var(--orange);
  stroke-width:2;
  fill:none
}

.opening-lead {
  font-size:clamp(19px,1.6vw,25px);
  line-height:1.9;
  letter-spacing:.05em;
  margin-bottom:30px
}

.text-cta {
  display:inline-flex;
  align-items:center;
  gap:40px;
  border-bottom:1px solid var(--ink);
  padding:8px 0 15px;
  text-decoration:none;
  font-size:17px;
  font-weight:bold;
  min-height:48px
}

.text-cta>span {
  font:32px/1 Arial,sans-serif;
  transition:transform .25s
}

.text-cta:hover>span {
  transform:translate(4px,4px)
}

.opening-note {
  margin-top:18px;
  font-size:13px;
  color:var(--muted)
}

.thought-board {
  height:470px;
  position:relative;
  align-self:center;
  isolation:isolate
}

.pencil-label {
  position:absolute;
  top:0;
  left:5%;
  font-size:13px;
  transform:rotate(-5deg);
  color:var(--muted)
}

.thought {
  position:absolute;
  background:var(--white);
  font-size:16px;
  white-space:nowrap;
  padding:10px 18px;
  box-shadow:1px 3px 0 #1717170c;
  z-index:2
}

.thought-one {
  top:70px;
  left:2%;
  transform:rotate(-9deg)
}

.thought-two {
  top:158px;
  right:0;
  transform:rotate(7deg);
  background:var(--yellow)
}

.thought-three {
  top:257px;
  left:0;
  transform:rotate(-3deg)
}

.found-ring {
  position:absolute;
  right:8%;
  bottom:28px;
  z-index:3;
  border:2px solid var(--orange);
  color:var(--orange);
  width:148px;
  height:126px;
  border-radius:47% 51% 49% 45%;
  display:grid;
  place-items:center;
  transform:rotate(11deg);
  font-size:25px;
  font-weight:bold;
  line-height:1.6;
  background:var(--paper)
}

.found-ring:after {
  content:"";
  position:absolute;
  inset:-7px -3px -4px -8px;
  border:1px solid var(--orange);
  border-radius:49%;
  transform:rotate(-14deg)
}

.found-ring>span {
  transform:rotate(-11deg)
}

.thread {
  position:absolute;
  inset:20px -8px 0;
  width:105%;
  height:430px;
  stroke:#777777;
  stroke-width:1.3;
  z-index:0
}

.board-note {
  position:absolute;
  bottom:-7px;
  left:1%;
  font-size:12px;
  color:var(--muted);
  transform:rotate(-4deg)
}

.opening-bottom {
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:50px 0 22px;
  margin-top:18px;
  font:12px Arial,sans-serif;
  letter-spacing:.07em
}

.opening-bottom a {
  font-family:inherit;
  text-decoration:none;
  letter-spacing:0;
  font-size:13px;
  padding:10px 0
}

.opening-bottom a span {
  margin-left:25px
}

.chapter {
  max-width:1500px;
  margin:auto;
  padding:115px var(--gutter)
}

.chapter-label {
  font-size:14px;
  letter-spacing:.04em;
  margin-bottom:45px;
  display:flex;
  align-items:center;
  gap:18px
}

.chapter-label>span {
  font:italic 23px Georgia,serif;
  color:var(--orange)
}

.ordinary {
  position:relative;
  padding-top:125px;
  padding-bottom:150px
}

.ordinary-grid {
  display:grid;
  grid-template-columns:1.18fr 1fr;
  gap:9%;
  align-items:start
}

.ordinary h2 {
  font-size:clamp(38px,4.6vw,69px);
  line-height:1.7;
  padding-top:42px;
  margin-left:-.5em;
  white-space:nowrap
}

.ordinary-word {
  position:relative
}

.ordinary-word:after {
  content:"";
  position:absolute;
  inset:-7% -17%;
  border:2px solid var(--orange);
  border-radius:49%;
  transform:rotate(-11deg)
}

.ordinary-copy p {
  margin-bottom:25px;
  line-height:2.25
}

.ordinary-copy .large-copy {
  font-size:clamp(20px,1.8vw,27px);
  line-height:2;
  margin-bottom:38px
}

.ordinary-copy strong {
  font-weight:700;
  background:linear-gradient(transparent 73%,var(--yellow) 0)
}

.margin-note {
  position:absolute;
  bottom:65px;
  left:var(--gutter);
  font-size:13px;
  writing-mode:vertical-rl;
  letter-spacing:.1em;
  transform:rotate(180deg);
  color:var(--muted)
}

.discovery {
  background:var(--peach);
  padding:95px var(--gutter) 60px;
  position:relative
}

.discovery:before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-16px;
  height:32px;
  background:var(--peach);
  clip-path:polygon(0 55%,9% 38%,25% 50%,42% 19%,61% 51%,79% 30%,100% 54%,100% 100%,0 100%)
}

.discovery-intro {
  max-width:1280px;
  margin:0 auto 48px;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:20px 70px;
  align-items:end
}

.discovery-intro .chapter-label {
  grid-column:1/-1;
  margin-bottom:16px
}

.discovery-intro h2 {
  font-size:clamp(33px,4vw,56px);
  line-height:1.75
}

.quote-mark {
  color:var(--orange)
}

.discovery-intro>p:last-child {
  font-size:16px;
  line-height:2.2;
  margin-bottom:10px
}

.conversation {
  max-width:1280px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10%;
  align-items:start
}

.question {
  padding:0;
  margin:0;
  border:0;
  min-width:0
}

.question legend {
  font-size:25px;
  font-weight:bold;
  margin-bottom:28px;
  line-height:1.7
}

.question legend br {
  display:none
}

.choices {
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--ink)
}

.choices button {
  background:transparent;
  border:0;
  border-bottom:1px solid #999999;
  text-align:left;
  padding:16px 5px;
  font-size:16px;
  display:flex;
  gap:20px;
  align-items:center;
  justify-content:space-between;
  min-height:58px;
  transition:padding .25s,background .25s
}

.choices button span {
  font:21px Arial,sans-serif
}

.choices button:hover {
  padding-left:15px;
  background:#ffffff50
}

.choices button[aria-pressed="true"] {
  background:var(--ink);
  color:var(--paper);
  padding-left:18px;
  padding-right:18px
}

.choices button:focus-visible {
  outline-offset:-3px
}

.reply-paper {
  background:var(--white);
  border:1px solid #cccccc;
  padding:33px 35px 20px;
  transform:rotate(1.5deg);
  box-shadow:4px 5px 0 #17171714;
  position:relative;
  min-height:555px
}

.reply-paper:before {
  content:"";
  width:75px;
  height:22px;
  background:#1717170c;
  position:absolute;
  top:-10px;
  left:42%;
  transform:rotate(-6deg)
}

.reply-label {
  font-size:13px;
  border-bottom:1px solid var(--line);
  padding-bottom:17px;
  margin-bottom:24px
}

.reply-message {
  min-height:330px
}

.reply-picked {
  font-size:16px;
  margin-bottom:12px
}

.reply-title {
  font-size:clamp(28px,2.7vw,38px);
  color:var(--orange);
  line-height:1.7;
  margin-bottom:20px
}

.reply-detail {
  font-size:16px;
  line-height:2;
  margin-bottom:18px
}

.reply-question {
  font-size:16px;
  font-weight:bold;
  border-left:2px solid var(--orange);
  padding-left:15px;
  line-height:1.85
}

.reply-actions {
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:space-between;
  flex-wrap:wrap;
  padding-top:24px
}

.under-link {
  display:inline-flex;
  align-items:center;
  gap:24px;
  font-size:15px;
  font-weight:bold;
  min-height:44px
}

.reset-conversation {
  border:0;
  background:transparent;
  font-size:13px;
  text-decoration:underline;
  min-height:44px;
  padding:8px 0;
  color:var(--muted)
}

.discovery-foot {
  max-width:1280px;
  margin:30px auto 0;
  font-size:13px;
  line-height:1.9;
  color:var(--muted)
}

.no-script {
  max-width:1280px;
  margin:20px auto
}

.no-script a {
  font-weight:bold
}

@media(min-width:1600px) {
  .opening {
    padding-top:70px
  }

  .opening-bottom {
    padding-top:75px
  }

}

@media(max-width:1100px) {
  .masthead {
    gap:22px
  }

  .desktop-links {
    gap:18px;
    font-size:13px
  }

  .brand {
    font-size:25px
  }

  .header-talk {
    gap:13px
  }

  .opening-grid {
    grid-template-columns:1.55fr 1fr
  }

  .thought {
    font-size:14px;
    padding:10px 12px
  }

  .thought-board {
    height:430px
  }

  .found-ring {
    width:120px;
    height:105px;
    font-size:21px;
    right:2%
  }

  .thought-three {
    top:240px
  }

  .thread {
    height:400px
  }

  .conversation {
    gap:6%
  }

  .reply-paper {
    padding:28px 25px 20px
  }

  .reply-message {
    min-height:355px
  }

  .ordinary-grid {
    gap:7%
  }

}

@media(max-width:800px) {
  .masthead {
    padding:24px var(--gutter);
    gap:23px
  }

  .brand {
    font-size:25px
  }

  .desktop-links {
    display:none
  }

  .header-talk {
    margin-left:auto;
    font-size:13px;
    gap:12px
  }

  .mobile-menu {
    display:block;
    position:relative
  }

  .mobile-menu summary {
    list-style:none;
    width:44px;
    height:44px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:8px;
    cursor:pointer
  }

  .mobile-menu summary::-webkit-details-marker {
    display:none
  }

  .mobile-menu summary span {
    width:27px;
    height:1px;
    background:var(--ink);
    margin-left:auto
  }

  .mobile-menu nav {
    position:absolute;
    right:0;
    top:54px;
    background:var(--paper);
    border:1px solid var(--ink);
    padding:18px 24px;
    width:min(290px,calc(100vw - 48px));
    box-shadow:5px 5px 0 #17171714
  }

  .mobile-menu nav a {
    display:block;
    padding:12px 0;
    text-decoration:none;
    font-size:15px;
    border-bottom:1px solid var(--line)
  }

  .opening {
    padding-top:33px
  }

  .opening-kicker {
    font-size:13px;
    margin-bottom:28px;
    max-width:300px;
    line-height:1.85
  }

  .opening-grid {
    display:block
  }

  .opening h1 {
    font-size:clamp(33px,7.7vw,61px);
    line-height:1.75;
    margin-bottom:30px;
    letter-spacing:0
  }

  .opening-lead {
    font-size:19px;
    line-height:2
  }

  .opening-note {
    font-size:13px;
    max-width:270px
  }

  .text-cta {
    font-size:16px;
    gap:27px
  }

  .thought-board {
    height:280px;
    width:90%;
    max-width:450px;
    margin:50px 0 0 auto
  }

  .pencil-label {
    font-size:12px;
    top:-8px;
    left:0
  }

  .thought {
    font-size:14px
  }

  .thought-one {
    top:30px;
    left:0
  }

  .thought-two {
    top:95px;
    right:0
  }

  .thought-three {
    top:158px;
    left:-3%
  }

  .found-ring {
    width:106px;
    height:87px;
    bottom:0;
    right:2%;
    font-size:18px
  }

  .thread {
    height:258px;
    top:4px;
    left:5px;
    width:95%
  }

  .board-note {
    bottom:0;
    left:0;
    font-size:12px
  }

  .opening-bottom {
    padding-top:30px;
    margin-top:20px;
    font-size:10px;
    letter-spacing:0
  }

  .opening-bottom>span {
    max-width:165px;
    line-height:1.6
  }

  .opening-bottom a {
    font-size:12px;
    white-space:nowrap
  }

  .opening-bottom a span {
    margin-left:15px
  }

  .chapter {
    padding-top:70px;
    padding-bottom:75px
  }

  .chapter-label {
    font-size:13px;
    margin-bottom:32px;
    gap:15px
  }

  .chapter-label>span {
    font-size:21px
  }

  .ordinary-grid {
    display:block
  }

  .ordinary h2 {
    font-size:clamp(33px,7.7vw,56px);
    padding:0;
    margin-bottom:40px;
    line-height:1.8
  }

  .ordinary-copy {
    padding-left:11%;
    max-width:650px
  }

  .ordinary-copy p {
    font-size:16px;
    line-height:2.2;
    margin-bottom:25px
  }

  .ordinary-copy .large-copy {
    font-size:20px;
    line-height:2
  }

  .margin-note {
    display:none
  }

  .discovery {
    padding-top:65px;
    padding-bottom:45px
  }

  .discovery-intro {
    display:block;
    margin-bottom:32px
  }

  .discovery-intro .chapter-label {
    margin-bottom:28px
  }

  .discovery-intro h2 {
    font-size:clamp(30px,7vw,46px);
    line-height:1.8;
    margin-bottom:24px
  }

  .discovery-intro>p:last-child {
    font-size:16px
  }

  .conversation {
    grid-template-columns:1fr;
    gap:45px
  }

  .question legend {
    font-size:22px;
    margin-bottom:23px
  }

  .choices button {
    font-size:15px;
    min-height:56px;
    padding:16px 4px
  }

  .reply-paper {
    transform:rotate(.6deg);
    padding:28px 24px 20px;
    min-height:480px
  }

  .reply-title {
    font-size:29px
  }

  .reply-message {
    min-height:310px
  }

  .reply-picked,.reply-detail,.reply-question {
    font-size:16px
  }

  .reply-label {
    font-size:12px
  }

  .reply-actions {
    display:block;
    padding-top:20px
  }

  .reset-conversation {
    display:block
  }

  .discovery-foot {
    font-size:12px
  }

  .mobile-only {
    display:block
  }

}

@media(max-width:380px) {
  .masthead {
    gap:14px
  }

  .brand {
    font-size:22px
  }

  .header-talk {
    font-size:12px;
    gap:9px
  }

  .header-talk span {
    font-size:21px
  }

  .question legend br {
    display:block
  }

  .ordinary-copy {
    padding-left:6%
  }

  .thought-three {
    font-size:13px
  }

  .text-cta {
    gap:20px
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }

}

/* The same thread travels through the process; essential content stays visible. */
.making {
  position:relative;
  overflow:hidden;
  padding-top:125px;
  padding-bottom:100px
}

.making-heading {
  font-size:clamp(28px,3.3vw,47px);
  margin-left:15%;
  line-height:1.8;
  margin-bottom:105px
}

.making-path {
  position:absolute;
  width:140px;
  left:49%;
  top:320px;
  bottom:280px;
  z-index:0;
  pointer-events:none
}

.making-path svg {
  height:100%;
  width:100%;
  overflow:visible
}

.making-path path {
  stroke:var(--orange);
  stroke-width:1.4;
  fill:none;
  stroke-dasharray:1;
  stroke-dashoffset:.8;
  transition:stroke-dashoffset 2s ease
}

.making.is-seen .making-path path {
  stroke-dashoffset:0
}

.making-scenes {
  list-style:none;
  padding:0;
  margin:0;
  position:relative;
  z-index:1
}

.scene {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14%;
  margin-bottom:115px;
  align-items:center
}

.scene-number {
  font:13px Arial,sans-serif;
  letter-spacing:.08em;
  display:block;
  margin-bottom:22px;
  color:var(--muted)
}

.scene h3 {
  font-size:clamp(29px,3.3vw,47px);
  margin-bottom:23px;
  line-height:1.7
}

.scene p {
  font-size:16px;
  line-height:2.2
}

.scene-find .scene-copy {
  grid-column:2;
  grid-row:1
}

.scene-find .discovery-words {
  grid-column:1;
  grid-row:1
}

.scattered-words {
  display:flex;
  flex-wrap:wrap;
  gap:20px 22px;
  align-content:center;
  max-width:420px;
  padding:25px
}

.scattered-words span {
  font-size:17px;
  border-bottom:1px solid var(--line);
  padding:10px 0;
  transition:transform 1s ease
}

.scattered-words span:nth-child(1) {
  transform:translate(-10px,-8px) rotate(-12deg)
}

.scattered-words span:nth-child(2) {
  transform:translate(10px,7px) rotate(9deg)
}

.scattered-words span:nth-child(3) {
  transform:translate(-4px,10px) rotate(8deg)
}

.scattered-words span:nth-child(4) {
  transform:translate(15px,25px) rotate(-7deg)
}

.making.is-seen .scattered-words span {
  transform:none
}

.discovery-words {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:20px;
  font-size:18px;
  max-width:340px;
  margin:auto
}

.discovery-equals {
  color:var(--orange);
  font-size:25px
}

.discovery-words strong {
  display:block;
  text-align:center;
  flex-basis:100%;
  position:relative;
  font-size:35px;
  margin-top:32px;
  font-weight:500;
  color:var(--orange)
}

.hand-circle {
  position:absolute;
  inset:-8px 8%;
  border:2px solid var(--orange);
  border-radius:48%;
  transform:rotate(-8deg)
}

.site-sketch {
  width:90%;
  max-width:400px;
  background:var(--white);
  border:1px solid var(--ink);
  transform:rotate(-3deg);
  transition:transform 1.5s ease;
  margin:auto;
  box-shadow:10px 10px 0 #1717170c
}

.making.is-seen .site-sketch {
  transform:rotate(0)
}

.sketch-bar {
  padding:12px;
  border-bottom:1px solid var(--line);
  display:flex;
  gap:5px
}

.sketch-bar span {
  width:4px;
  height:4px;
  border:1px solid var(--muted);
  border-radius:50%
}

.sketch-content {
  padding:26px
}

.sketch-content>p {
  font-size:23px;
  font-weight:bold;
  line-height:1.7;
  margin-bottom:20px
}

.sketch-rule {
  display:block;
  width:88%;
  height:1px;
  background:var(--line);
  margin:10px 0
}

.sketch-rule.short {
  width:67%
}

.sketch-picture {
  height:125px;
  margin:25px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:25px;
  background:var(--yellow);
  color:var(--ink)
}

.sketch-picture span:first-child {
  font-size:26px;
  transform:rotate(-7deg)
}

.sketch-picture span:last-child {
  font-size:20px;
  transform:rotate(7deg)
}

.sketch-link {
  font-size:13px;
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding-top:12px
}

.site-sketch figcaption {
  font-size:12px;
  padding:0 26px 18px;
  color:var(--muted)
}

.making-end {
  text-align:center;
  font-size:clamp(29px,4vw,56px);
  font-weight:bold;
  line-height:1.8
}

.making-end>span {
  color:var(--orange)
}

.services {
  background:var(--green);
  color:var(--paper);
  padding:95px var(--gutter) 55px
}

.services-intro,.service-lines,.service-boundary {
  max-width:1320px;
  margin:auto
}

.services .chapter-label>span {
  color:#ffffff
}

.services-intro {
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:0 50px;
  align-items:end;
  margin-bottom:60px
}

.services-intro .chapter-label {
  grid-column:1/-1
}

.services h2 {
  font-size:clamp(34px,4vw,57px);
  line-height:1.75
}

.services-intro>p:last-child {
  font-size:18px;
  line-height:2
}

.service-lines article {
  border-top:1px solid #ffffff75;
  display:grid;
  grid-template-columns:.6fr 1.1fr 1.4fr;
  gap:40px;
  padding:38px 0
}

.service-lines article:last-child {
  border-bottom:1px solid #ffffff75
}

.service-tag {
  font:12px/1.8 Arial,sans-serif;
  letter-spacing:.06em;
  padding-top:9px;
  color:#ffffff
}

.service-lines h3 {
  font-size:27px;
  line-height:1.8
}

.service-lines article>div p {
  font-size:16px;
  line-height:2
}

.service-lines article>div .service-note {
  font-size:12px;
  margin-top:18px;
  color:#ffffff
}

.service-boundary {
  font-size:13px;
  line-height:2;
  margin-top:25px;
  max-width:1320px;
  color:#ffffff
}

.together {
  padding-top:130px;
  padding-bottom:125px
}

.together-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:10%;
  align-items:start
}

.together h2 {
  font-size:clamp(32px,4.2vw,59px);
  line-height:1.8
}

.together p:not(.chapter-label) {
  font-size:16px;
  line-height:2.2;
  margin-bottom:25px
}

.growing-word {
  position:relative
}

.growing-word svg {
  position:absolute;
  bottom:-8px;
  left:0;
  width:100%;
  height:17px;
  stroke:var(--orange);
  fill:none;
  stroke-width:2
}

.local-note {
  background:var(--yellow);
  padding:72px var(--gutter) 65px;
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:25px 9%;
  align-items:center;
  position:relative
}

.local-prefix {
  grid-column:1/-1;
  font:12px Arial,sans-serif;
  letter-spacing:.15em;
  margin-bottom:20px
}

.local-note h2 {
  font-size:clamp(27px,3vw,44px);
  line-height:1.9
}

.local-note h2>span {
  color:var(--orange)
}

.local-copy p {
  font-size:16px;
  line-height:2.1
}

.local-copy .small-copy {
  font-size:13px;
  margin-top:23px;
  max-width:430px
}

.cost {
  padding-top:125px;
  padding-bottom:60px
}

.cost-heading {
  display:grid;
  grid-template-columns:1fr 1.35fr;
  align-items:end;
  gap:0 10%;
  margin-bottom:50px
}

.cost-heading .chapter-label {
  grid-column:1/-1;
  margin-bottom:25px
}

.cost h2 {
  font-size:clamp(35px,4vw,56px);
  line-height:1.75
}

.cost-heading>p:last-child {
  font-size:16px;
  line-height:2.1
}

.cost-list article {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px 10%;
  padding:32px 0 38px;
  border-top:1px solid var(--ink)
}

.cost-list article:last-child {
  border-bottom:1px solid var(--ink)
}

.cost-label {
  display:block;
  font-size:13px;
  color:var(--muted);
  margin-bottom:12px
}

.cost-list h3 {
  font-size:27px
}

.cost-number {
  display:flex;
  align-items:baseline;
  gap:10px;
  justify-content:flex-start
}

.cost-number strong {
  font:400 clamp(44px,5vw,70px)/1.2 Arial,sans-serif;
  letter-spacing:-.05em
}

.cost-number>span {
  font-size:20px
}

.cost-number small {
  display:block;
  font-size:12px;
  line-height:1.5
}

.cost-number .monthly {
  font-size:16px
}

.cost-description {
  font-size:16px;
  line-height:2
}

.cost-description.small-copy {
  font-size:14px;
  color:var(--muted)
}

.cost-bottom {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10%;
  margin-top:25px;
  align-items:center
}

.cost-bottom p {
  font-size:13px;
  line-height:2;
  color:var(--muted)
}

.cost-bottom .text-cta {
  font-size:15px;
  gap:22px
}

.cost-bottom .text-cta span {
  font-size:25px
}

.questions {
  display:grid;
  grid-template-columns:1fr 1.45fr;
  gap:70px;
  padding-top:65px;
  padding-bottom:125px
}

.questions .chapter-label {
  margin-bottom:15px
}

.questions h2 {
  font-size:27px;
  line-height:1.8
}

.question-list details {
  padding:20px 0;
  border-bottom:1px solid var(--line)
}

.question-list details:first-child {
  border-top:1px solid var(--line)
}

.question-list summary {
  cursor:pointer;
  list-style:none;
  font-size:16px;
  font-weight:bold;
  position:relative;
  padding-right:35px;
  line-height:1.8;
  min-height:29px
}

.question-list summary::-webkit-details-marker {
  display:none
}

.question-list summary:after {
  content:"＋";
  position:absolute;
  right:2px;
  font-size:20px;
  font-weight:400;
  top:0
}

.question-list details[open] summary:after {
  content:"−"
}

.question-list details p {
  font-size:16px;
  margin-top:20px;
  line-height:2;
  color:var(--muted)
}

.invitation {
  background:var(--ink);
  color:var(--white);
  padding:95px var(--gutter) 85px;
  position:relative
}

.invitation-content {
  max-width:1320px;
  margin:auto
}

.invitation-label {
  font:13px Arial,sans-serif;
  letter-spacing:.1em;
  margin-bottom:30px
}

.invitation h2 {
  font-size:clamp(32px,4.2vw,62px);
  line-height:1.8;
  margin-bottom:50px
}

.invitation-bottom {
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:12%;
  align-items:start
}

.invitation-bottom p {
  font-size:16px;
  line-height:2.2;
  margin-bottom:20px
}

.mail-cta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  font-size:clamp(23px,2.5vw,36px);
  font-weight:bold;
  text-decoration:none;
  padding:20px 0;
  border-top:1px solid #ffffff80;
  border-bottom:1px solid #ffffff80
}

.mail-cta span {
  font:43px/1 Arial,sans-serif;
  transition:transform .2s
}

.mail-cta:hover span {
  transform:translate(5px,-5px)
}

.contact-action .mail-hint {
  font-size:12px;
  margin:10px 0 22px
}

.mail-address {
  font:16px/1.8 Arial,sans-serif;
  overflow-wrap:anywhere
}

.contact-action .mail-small {
  font-size:13px;
  line-height:2;
  margin:18px 0 15px
}

.privacy-link {
  font-size:13px
}

.invitation a:focus-visible {
  outline-color:var(--yellow)
}

.page-footer {
  padding:47px var(--gutter) 25px;
  max-width:1700px;
  margin:auto;
  overflow:hidden
}

.footer-meta {
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:40px;
  margin-bottom:45px
}

.footer-meta p {
  font-size:13px;
  line-height:2
}

.footer-meta nav {
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:13px
}

.footer-meta nav a {
  min-height:30px
}

.footer-brand {
  display:block;
  text-decoration:none;
  font:900 clamp(47px,11.9vw,195px)/1.1 Arial,sans-serif;
  letter-spacing:-.065em;
  white-space:nowrap;
  margin-bottom:30px
}

.footer-brand>span {
  color:var(--orange)
}

.footer-bottomline {
  border-top:1px solid var(--line);
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  font-size:12px
}

.footer-bottomline small {
  font:12px Arial,sans-serif
}

/* Existing legal pages retain their text and URLs. */
.policy {
  max-width:960px;
  padding:65px var(--gutter) 90px;
  margin:auto;
  font-size:16px;
  line-height:2.1
}

.policy h1 {
  font-size:clamp(29px,3.5vw,43px);
  line-height:1.7;
  margin-bottom:30px
}

.policy h2 {
  font-size:25px;
  margin:38px 0 20px
}

.policy h3 {
  font-size:20px
}

.policy p {
  margin-bottom:22px
}

.policy a {
  overflow-wrap:anywhere
}

.policy li {
  margin-bottom:14px
}

.policy ul,.policy ol {
  padding-left:24px
}

.policy .eyebrow {
  font:13px/1.8 Arial,sans-serif;
  letter-spacing:.12em;
  margin-bottom:28px;
  color:var(--muted)
}

.guide-lead {
  font-size:20px
}

.guide-nav {
  display:flex;
  flex-wrap:wrap;
  gap:12px 22px;
  border-block:1px solid var(--line);
  padding:20px 0;
  margin:30px 0;
  font-size:14px
}

.guide-nav a {
  padding:5px 0
}

.service-guide section {
  padding-top:5px;
  margin-bottom:35px
}

.guide-contact {
  background:var(--yellow);
  padding:26px
}

.guide-contact h2 {
  margin-top:0
}

.policy .button {
  display:inline-flex;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid var(--ink);
  text-decoration:none;
  font-weight:bold;
  background:transparent;
  color:var(--ink);
  border-radius:0
}

.policy .fine {
  font-size:13px;
  margin-top:25px;
  color:var(--muted)
}

.analytics-choice {
  position:fixed;
  bottom:12px;
  right:12px;
  z-index:30;
  width:min(440px,calc(100% - 24px));
  padding:20px;
  background:var(--white);
  color:var(--ink);
  border:1px solid var(--ink);
  box-shadow:4px 4px 0 #17171724;
  font-size:14px;
  line-height:1.9
}

.analytics-choice p {
  margin-bottom:14px
}

.analytics-choice div {
  display:flex;
  gap:15px
}

.analytics-choice button {
  background:var(--paper);
  border:1px solid var(--ink);
  padding:9px 17px;
  font-size:14px;
  min-height:44px
}

@media(max-width:1100px) {
  .scene {
    gap:11%
  }

  .service-lines article {
    grid-template-columns:.6fr 1fr 1.3fr;
    gap:25px
  }

  .service-lines h3 {
    font-size:24px
  }

  .questions {
    gap:40px
  }

  .cost-list h3 {
    font-size:24px
  }

  .cost-bottom {
    gap:6%
  }

  .invitation-bottom {
    gap:8%
  }

}

@media(max-width:800px) {
  .making {
    padding-top:75px;
    padding-bottom:70px
  }

  .making-heading {
    font-size:27px;
    line-height:1.85;
    margin-left:0;
    margin-bottom:60px
  }

  .making-path {
    width:65px;
    left:auto;
    right:0;
    top:330px;
    bottom:250px;
    opacity:.7
  }

  .scene {
    grid-template-columns:1fr;
    gap:28px;
    margin-bottom:70px
  }

  .scene-find .scene-copy,.scene-find .discovery-words {
    grid-column:auto;
    grid-row:auto
  }

  .scene-number {
    font-size:12px;
    margin-bottom:18px
  }

  .scene h3 {
    font-size:31px;
    line-height:1.8;
    margin-bottom:23px
  }

  .scene p {
    font-size:16px;
    line-height:2.2
  }

  .scattered-words {
    max-width:350px;
    margin-left:auto;
    padding:10px 0 0;
    gap:18px 22px
  }

  .scattered-words span {
    font-size:15px
  }

  .discovery-words {
    margin:12px auto;
    gap:15px;
    font-size:16px;
    max-width:300px
  }

  .discovery-words strong {
    font-size:31px
  }

  .site-sketch {
    width:86%;
    margin:10px 0 0 auto
  }

  .sketch-content {
    padding:23px
  }

  .sketch-content>p {
    font-size:22px
  }

  .site-sketch figcaption {
    font-size:12px;
    padding-inline:23px
  }

  .making-end {
    font-size:30px;
    line-height:1.9
  }

  .services {
    padding-top:60px;
    padding-bottom:45px
  }

  .services-intro {
    display:block;
    margin-bottom:35px
  }

  .services h2 {
    font-size:32px;
    line-height:1.8;
    margin-bottom:25px
  }

  .services-intro>p:last-child {
    font-size:16px
  }

  .service-lines article {
    grid-template-columns:1fr;
    gap:18px;
    padding:28px 0
  }

  .service-tag {
    padding:0;
    font-size:12px
  }

  .service-lines h3 {
    font-size:26px
  }

  .service-lines h3 br {
    display:none
  }

  .service-lines article>div .service-note {
    font-size:12px;
    margin-top:12px
  }

  .service-boundary {
    font-size:13px
  }

  .together {
    padding-top:80px;
    padding-bottom:75px
  }

  .together-grid {
    display:block
  }

  .together h2 {
    font-size:32px;
    margin-bottom:32px;
    line-height:1.85
  }

  .together p:not(.chapter-label) {
    font-size:16px
  }

  .local-note {
    display:block;
    padding:50px var(--gutter)
  }

  .local-prefix {
    font-size:12px;
    margin-bottom:25px
  }

  .local-note h2 {
    font-size:clamp(24px,5.8vw,38px);
    line-height:1.95;
    margin-bottom:30px
  }

  .local-copy p {
    font-size:16px
  }

  .local-copy .small-copy {
    font-size:13px
  }

  .cost {
    padding-top:75px;
    padding-bottom:35px
  }

  .cost-heading {
    display:block;
    margin-bottom:35px
  }

  .cost h2 {
    font-size:34px;
    line-height:1.8;
    margin-bottom:24px
  }

  .cost-heading>p:last-child {
    font-size:16px
  }

  .cost-list article {
    grid-template-columns:1fr;
    gap:20px;
    padding:28px 0
  }

  .cost-label {
    font-size:13px
  }

  .cost-list h3 {
    font-size:26px
  }

  .cost-number {
    gap:10px
  }

  .cost-number strong {
    font-size:53px
  }

  .cost-number>span {
    font-size:20px
  }

  .cost-number .monthly {
    font-size:15px
  }

  .cost-description {
    font-size:16px
  }

  .cost-description.small-copy {
    font-size:14px
  }

  .cost-bottom {
    display:block;
    margin-top:23px
  }

  .cost-bottom .text-cta {
    font-size:15px;
    margin-top:24px;
    gap:20px
  }

  .questions {
    grid-template-columns:1fr;
    gap:30px;
    padding-top:45px;
    padding-bottom:75px
  }

  .questions h2 {
    font-size:27px
  }

  .question-list details {
    padding:21px 0
  }

  .question-list summary,.question-list details p {
    font-size:16px
  }

  .question-list summary {
    padding-right:30px
  }

  .invitation {
    padding-top:60px;
    padding-bottom:55px
  }

  .invitation-label {
    font-size:12px
  }

  .invitation h2 {
    font-size:clamp(26px,6vw,40px);
    line-height:1.95;
    margin-bottom:30px;
    letter-spacing:0
  }

  .invitation-bottom {
    display:block
  }

  .invitation-bottom>div:first-child {
    margin-bottom:35px
  }

  .mail-cta {
    font-size:25px;
    gap:18px;
    padding-block:20px
  }

  .mail-cta span {
    font-size:36px
  }

  .contact-action .mail-small {
    font-size:13px
  }

  .footer-meta {
    flex-direction:column;
    gap:25px;
    margin-bottom:35px
  }

  .footer-meta p {
    font-size:13px
  }

  .footer-meta nav {
    font-size:13px;
    gap:4px
  }

  .footer-meta nav a {
    min-height:40px;
    display:flex;
    align-items:center
  }

  .page-footer {
    padding-top:35px;
    padding-bottom:23px
  }

  .footer-brand {
    font-size:11.2vw;
    margin-bottom:25px
  }

  .footer-bottomline {
    font-size:12px;
    display:block
  }

  .footer-bottomline small {
    display:block;
    margin-top:14px
  }

  .policy {
    padding-top:35px;
    padding-bottom:55px
  }

  .policy h1 {
    font-size:28px
  }

  .policy h2 {
    font-size:22px;
    line-height:1.8
  }

  .guide-lead {
    font-size:18px
  }

  .guide-contact {
    padding:24px
  }

  .policy .mobile-only {
    display:block
  }

}

@media(min-width:801px) {
  .policy .mobile-only {
    display:none
  }

}

@media(prefers-reduced-motion:reduce) {
  .making-path path {
    stroke-dashoffset:0
  }

  .scattered-words span,.site-sketch {
    transform:none!important
  }

}

@media print {
  .masthead,.page-footer,.guide-nav,.guide-contact,.analytics-choice {
    display:none!important
  }

  .policy {
    padding:0;
    font-size:11pt;
    line-height:1.65;
    max-width:none
  }

  .policy h1 {
    font-size:24pt
  }

  .policy h2 {
    font-size:16pt;
    break-after:avoid
  }

  .policy section {
    break-inside:avoid
  }

  a {
    color:inherit;
    text-decoration:none
  }

}

.header-talk .talk-label {
  font:inherit;
  line-height:1.8
}

.header-talk .talk-short {
  display:none
}

.header-talk .talk-arrow {
  font-size:24px;
  line-height:1
}

.reply-paper {
  scroll-margin-top:30px
}

@media(max-width:800px) {
  .header-talk .talk-label {
    display:none
  }

  .header-talk .talk-short {
    display:inline;
    font-size:13px;
    line-height:1.8
  }

  .masthead {
    gap:18px
  }

  .header-talk {
    gap:12px
  }

}

@media(max-width:380px) {
  .masthead {
    gap:14px
  }

  .header-talk .talk-short {
    font-size:12px
  }

}

.opening-kicker>span {
  display:inline-block
}

@media(max-width:800px) {
  .opening h1 {
    font-size:clamp(36px,8.4vw,61px)
  }

}

/* Two base colours: white / black. Red belongs to the flag and small emphasis. */
.brand-flag { display:inline-block; width:.64em; height:.8em; margin:0 .12em 0 .08em; color:var(--orange); vertical-align:-.04em; flex:none; overflow:visible; }
.brand .brand-flag { width:17px; height:23px; margin-left:3px; margin-right:1px; }
.brand>span:last-child { margin-left:4px; }
.footer-brand .brand-flag { width:.54em; height:.7em; }
.local-note { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.discovery { border-top:1px solid var(--line); }
.reply-paper { border:1px solid var(--line); box-shadow:none; }
.reply-paper::before { background:var(--ink); opacity:.06; }
.invitation { background:var(--ink); }
.services .service-tag { opacity:.7; }
.mail-cta { padding-block:24px; }
.story-bridge .bridge-copy p+p { margin-top:18px; }

/* Keep the full wordmark inside the same content edges at every screen width. */
.footer-brand { font-size:clamp(28px,10.2vw,168px); line-height:1.15; letter-spacing:-.055em; }

.terms-table-wrap{overflow-x:auto;margin:24px 0}.terms-table{border-collapse:collapse;width:100%;font-size:1rem}.terms-table th,.terms-table td{padding:16px 12px;border-bottom:1px solid #ccc;text-align:left;white-space:nowrap}.terms-table th{font-weight:600;background:#f6f6f6}.service-guide h3{font-size:1.15rem;margin:28px 0 12px}

/* Selected logo: connected-series 01, approved 2026-09-28. */
.brand-logo { display:block; width:100%; height:auto; }
.brand { width:160px; max-width:45vw; align-items:center; flex-shrink:0; }
.footer-brand { display:block; width:min(100%,620px); max-width:100%; margin-bottom:32px; }
.story-brand .brand-logo { width:clamp(190px,32vw,350px); max-width:100%; margin-inline:auto; }
.flag-menu>summary { padding:10px; }
.flag-menu>summary .brand-symbol { display:block; width:32px; height:32px; max-width:none; }
@media(max-width:800px) { .brand { width:135px; } .footer-brand { width:min(100%,420px); } }