/*
 * ZOOTRIPPER Human Edition
 * A restrained editorial layer: irregular rhythm, physical detail and fewer
 * repeated UI motifs. The stable site bundle remains untouched underneath.
 */
:root{
  --human-ink:#262724;
  --human-paper:#f2f0e9;
  --human-white:#fbfaf6;
  --human-coral:#c86e55;
  --human-teal:#496d68;
  --human-pencil:rgba(38,39,36,.32);
}

/* Subtle paper variation instead of a perfectly flat generated surface. */
body{
  background-color:var(--human-paper);
  background-image:
    radial-gradient(circle at 17% 21%,rgba(38,39,36,.022) 0 1px,transparent 1.3px),
    radial-gradient(circle at 71% 63%,rgba(38,39,36,.018) 0 1px,transparent 1.2px);
  background-size:19px 23px,31px 29px;
}

/* Labels stop behaving like one reusable AI component. */
.section-label{
  width:max-content;
  max-width:100%;
  padding:0!important;
  border:0!important;
  gap:.7rem!important;
  font-family:"Helvetica Neue",Arial,sans-serif!important;
  font-size:.61rem!important;
  letter-spacing:.12em!important;
}
.section-label:after{display:none!important}
.intro .section-label:before,
.journal-home .section-label:before{
  content:"";
  width:1.6rem;
  height:1px;
  background:currentColor;
  transform:rotate(-4deg);
}
.service-home .section-label{transform:translateX(clamp(12px,2vw,34px)) rotate(-1.2deg)}
.works-home .section-label{padding:.5rem .75rem!important;border:1px solid currentColor!important;transform:rotate(-1deg)}
.home-activities .section-label{writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.16em!important}

/* Hero: retain the strong photograph/type idea but make it feel art-directed. */
.home-hero-f{background:var(--human-white)}
.hhf-word{
  left:3.7vw;
  top:4.2vh;
  font-family:"Arial Narrow","Helvetica Neue",Arial,sans-serif;
  font-weight:800;
  letter-spacing:-.082em;
  filter:brightness(.67) saturate(.6) contrast(1.16);
}
.hhf-word:after{
  content:"";
  position:absolute;
  left:-1.4vw;
  bottom:-.045em;
  width:clamp(42px,6vw,96px);
  height:5px;
  background:var(--human-coral);
  transform:rotate(-2.3deg);
}
.hhf-copy{left:5.2vw;top:20vh}
.hhf-copy small{letter-spacing:.17em}
.hhf-copy h1{letter-spacing:-.035em;line-height:1.28}
.hhf-track{top:40vh;gap:2.4vw}
.hhf-track>button{width:69vw}
.hhf-track>button:nth-child(2){transform:scale(.9) rotate(.35deg)}
.hhf-track>button:nth-child(3){transform:scale(.9) rotate(-.3deg)}
.hhf-track>button.active{transform:scale(1) rotate(0)}
.hhf-track img{filter:saturate(.78) contrast(1.035)}
.hhf-track>button>span{bottom:-33px}
.hhf-track span i{letter-spacing:.13em}
.hhf-prev,.hhf-next{border-radius:0;transform:rotate(45deg)}
.hhf-prev{transform:rotate(45deg) translate(2px,2px)}
.hhf-prev::first-letter,.hhf-next::first-letter{transform:rotate(-45deg)}
.hhf-dots i{height:1px}

/* Opening statement: editorial, not a centered modular block. */
.seo-intro{
  position:relative;
  grid-template-columns:minmax(0,1.22fr) minmax(260px,.55fr)!important;
  gap:clamp(3rem,9vw,10rem)!important;
  padding-top:clamp(8rem,13vw,13rem)!important;
  background:var(--human-white)!important;
  border-top:0!important;
}
.seo-intro:before{
  content:"ZOOTRIPPER / KUMAMOTO";
  position:absolute;
  top:4.2rem;
  left:7vw;
  color:#888;
  font:500 .55rem/1 Arial,sans-serif;
  letter-spacing:.15em;
  transform:rotate(-.5deg);
}
.seo-intro-title{grid-column:1;max-width:900px}
.seo-intro-title small{display:none}
.seo-intro h2{margin:0;font-size:clamp(2.5rem,5vw,5.5rem);line-height:1.42;letter-spacing:-.055em;text-wrap:pretty}
.seo-intro-title>span{display:block;margin-top:2.4rem;color:#8a8982;font-size:.57rem;letter-spacing:.12em}
.seo-intro-copy{grid-column:2;padding-top:clamp(4rem,9vw,10rem);border-top:1px solid var(--human-pencil)}
.seo-intro nav{grid-column:1/-1!important;display:grid!important;grid-template-columns:1.25fr .8fr 1fr .95fr!important;gap:0!important;margin-top:clamp(3rem,6vw,6rem)!important;border-top:1px solid var(--human-pencil)}
.seo-intro nav a{min-height:5.8rem;padding:1.25rem 1rem 1rem 0!important;border:0!important;border-right:1px solid var(--human-pencil)!important}
.seo-intro nav a:nth-child(2){padding-left:clamp(1rem,3vw,3rem)!important}
.seo-intro nav a:nth-child(3){padding-left:clamp(.5rem,1.5vw,1.5rem)!important}
.seo-intro nav a:nth-child(4){padding-left:clamp(1.5rem,4vw,4rem)!important;border-right:0!important}

/* Remove the fashionable giant ghost words that made sections feel generated. */
.intro:before,.works-home:before{display:none!important}

/* About: photographic caption and copy no longer sit in a perfect 50/50 module. */
.intro{background:var(--human-white)!important}
.intro .two-col{grid-template-columns:minmax(360px,.82fr) minmax(380px,1.18fr)!important;gap:clamp(3rem,11vw,12rem)!important}
.intro .two-col>div:first-child{display:grid!important;grid-template-columns:1fr!important}
.intro .kicker{order:2;margin:1.25rem 0 0!important;padding-left:clamp(2rem,5vw,5rem);font-size:clamp(.9rem,1.1vw,1.05rem)!important}
.intro img{order:1;aspect-ratio:5/6!important;clip-path:polygon(0 .7%,99.5% 0,100% 99%,.4% 100%)}
.intro .two-col>div:last-child{padding-top:clamp(6rem,12vw,12rem)!important}
.intro .two-col h2{max-width:8em;font-size:clamp(3rem,5.6vw,6rem)!important;line-height:1.3!important}
.intro .two-col h2:after{
  content:"";
  display:block;
  width:clamp(70px,9vw,145px);
  margin:clamp(2rem,4vw,4rem) 0;
  border-top:2px solid var(--human-coral);
  transform:rotate(-1.7deg);
}

/* Service: one continuous index, with alternating indents instead of identical rows. */
.service-home{background:#3f6562!important}
.service-home>h2{max-width:9.4em!important;letter-spacing:-.05em}
.service-home .service-intro{grid-template-columns:minmax(260px,.72fr) 1fr!important;margin-left:clamp(0px,8vw,120px)}
.service-home article{grid-template-columns:3.2rem minmax(260px,.7fr) 1fr 1.5rem!important}
.service-home article:nth-of-type(even){margin-left:clamp(1.25rem,7vw,7rem)}
.service-home article:nth-of-type(3){margin-right:clamp(1.25rem,5vw,5rem)}
.service-home article:hover{padding-left:clamp(.4rem,1vw,1rem)!important;background:rgba(255,255,255,.92)!important}

/* Works: portfolio pages need hierarchy, not four equal cards. */
.works-home{background:#ebe8df!important}
.works-home>h2{margin-left:clamp(0px,8vw,120px)!important}
.works-home .work-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr)!important;
  gap:clamp(3.5rem,9vw,10rem) clamp(1.5rem,4vw,4.5rem)!important;
  align-items:start;
}
.works-home .work-grid>a{margin:0!important;overflow:visible!important}
.works-home .work-grid>a:nth-child(1){grid-row:span 2}
.works-home .work-grid>a:nth-child(3){width:82%;margin-left:auto!important}
.works-home .work-grid>a:nth-child(4){grid-column:1/-1;width:62%;margin:clamp(1rem,4vw,4rem) 0 0 13%!important}
.works-home .work-grid>a:nth-child(1) img{aspect-ratio:4/5!important}
.works-home .work-grid>a:nth-child(2) img{aspect-ratio:5/4!important}
.works-home .work-grid>a:nth-child(3) img{aspect-ratio:1/1!important}
.works-home .work-grid>a:nth-child(4) img{aspect-ratio:16/9!important}
.works-home .work-grid img{clip-path:polygon(.25% .35%,99.6% 0,100% 99.5%,0 100%);filter:saturate(.72) contrast(1.02)!important}
.works-home .work-grid>a:hover img{filter:saturate(.95) contrast(1.02)!important}
.works-home .work-grid small{margin-top:1rem!important}
.works-home .work-grid h3{margin-top:.55rem}

/* Activities deliberately break the studio system and feel like a noticeboard. */
.home-activities{position:relative;background:#272824!important;padding-top:clamp(7rem,11vw,11rem)!important}
.home-activities header{grid-template-columns:4rem minmax(340px,.8fr) 1fr!important;gap:clamp(2rem,5vw,6rem)!important}
.home-activities header h2{max-width:8em;transform:rotate(-.7deg)}
.home-activities-grid{gap:clamp(1rem,3vw,3rem)!important}
.home-activities-grid>a:first-child{transform:translateY(clamp(2rem,7vw,7rem)) rotate(-.35deg)}
.home-activities-grid>a:last-child{transform:rotate(.4deg)}
.home-activities-grid figure{clip-path:polygon(.4% 0,100% .8%,99.4% 100%,0 99.2%)}
.home-activities-grid small{letter-spacing:.12em!important}

/* Journal resembles an edited contents page, not a dashboard list. */
.journal-home{background:var(--human-white)!important}
.journal-home .journal-layout{grid-template-columns:minmax(340px,.68fr) minmax(0,1.32fr)!important;gap:clamp(4rem,12vw,13rem)!important}
.journal-home h2{font-size:clamp(2.8rem,4.8vw,5.4rem)!important}
.journal-home .post-row{grid-template-columns:5.5rem 7.5rem minmax(0,1fr)!important;padding:1.4rem 0!important}
.journal-home .post-row b{display:none}
.journal-home .post-row:nth-child(even){margin-left:clamp(0px,4vw,4rem)}
.journal-home .post-row-thumb{transform:rotate(-.6deg);filter:none}
.journal-home .post-row:nth-child(even) .post-row-thumb{transform:rotate(.65deg)}

/* FAQ loses the rigid four-cell component treatment. */
.answer-block{background:#dfe2dc!important}
.answer-block>h2{max-width:11em!important}
.answer-block>div{display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)!important;gap:0 clamp(4rem,10vw,10rem)!important;border:0!important}
.answer-block article{position:relative;padding:2rem 0 2rem clamp(2.8rem,5vw,5rem)!important;border:0!important;border-top:1px solid rgba(38,39,36,.35)!important}
.answer-block article:nth-child(even){transform:translateY(clamp(1rem,3vw,3rem))}
.answer-block article:before{content:"Q";position:absolute;left:0;top:1.8rem;color:var(--human-coral);font:italic 400 1.3rem Georgia,serif}

/* Contact is quieter and rectangular; fewer trendy circles and arrows. */
.cta>a{border-radius:0!important;transform:rotate(-1deg)}
.text-link{border-bottom:0!important;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.5em}

@media(max-width:900px){
  .seo-intro{grid-template-columns:1fr!important}
  .seo-intro-title,.seo-intro-copy{grid-column:1}
  .seo-intro-copy{padding-top:2rem}
  .intro .two-col{grid-template-columns:1fr!important;gap:3rem!important}
  .intro .two-col>div:last-child{padding-top:1rem!important}
  .service-home article:nth-of-type(even),.service-home article:nth-of-type(3){margin-left:0;margin-right:0}
  .home-activities header{grid-template-columns:2.5rem 1fr!important}
  .home-activities header>p:last-child{grid-column:2}
  .journal-home .journal-layout{grid-template-columns:1fr!important;gap:3rem!important}
}

@media(max-width:700px){
  body{background-size:17px 21px,27px 31px}
  .section-label{transform:none!important;writing-mode:horizontal-tb!important}
  .home-hero-f{min-height:620px}
  .hhf-word{left:20px;top:4.5vh;font-size:18vw}
  .hhf-word:after{left:0;height:3px}
  .hhf-copy{left:22px;top:13.5vh}
  .hhf-copy h1{font-size:clamp(1.55rem,7.2vw,2.25rem)!important}
  .hhf-track{top:31vh}
  .hhf-track>button{width:88vw}
  .hhf-track img{aspect-ratio:4/3!important}
  .hhf-prev,.hhf-next{display:none}
  .seo-intro{padding:7rem 22px 5.5rem!important}
  .seo-intro:before{top:3.5rem;left:22px}
  .seo-intro h2{font-size:clamp(2.25rem,11vw,3.45rem)}
  .seo-intro nav{grid-template-columns:1fr 1fr!important}
  .seo-intro nav a,.seo-intro nav a:nth-child(n){min-height:5rem;padding:1rem .75rem!important;border-right:0!important;border-bottom:1px solid var(--human-pencil)!important}
  .seo-intro nav a:nth-child(odd){border-right:1px solid var(--human-pencil)!important;padding-left:0!important}
  .intro .kicker{padding-left:2rem}
  .intro .two-col h2{font-size:clamp(2.7rem,13vw,4rem)!important}
  .service-home .service-intro{display:block!important;margin-left:0}
  .service-home article{grid-template-columns:2.4rem 1fr 1rem!important}
  .service-home article p{grid-column:2!important}
  .works-home>h2{margin-left:0!important}
  .works-home .work-grid{grid-template-columns:1fr!important;gap:3.5rem!important}
  .works-home .work-grid>a:nth-child(n){grid-column:auto;grid-row:auto;width:100%;margin:0!important}
  .works-home .work-grid>a:nth-child(odd){width:91%;margin-right:auto!important}
  .works-home .work-grid>a:nth-child(even){width:88%;margin-left:auto!important}
  .works-home .work-grid img{aspect-ratio:4/3!important}
  .home-activities header{display:block!important}
  .home-activities-grid{display:grid!important;grid-template-columns:1fr!important;gap:5rem!important}
  .home-activities-grid>a:first-child{transform:rotate(-.35deg)}
  .journal-home .post-row{grid-template-columns:5.2rem minmax(0,1fr)!important;margin-left:0!important}
  .journal-home .post-row time{grid-column:1!important}
  .journal-home .post-row h3{grid-column:2!important}
  .answer-block>div{grid-template-columns:1fr!important}
  .answer-block article:nth-child(even){transform:none}
}

@media(prefers-reduced-motion:reduce){
  .hhf-track>button,.home-activities-grid>a,.journal-home .post-row-thumb{transform:none!important}
}

/* ================================================================
 * 3.1 Natural Pop
 * Softer colour, friendlier geometry and small human gestures.
 * ================================================================ */
:root{
  --human-ink:#30332e;
  --human-paper:#f6f1e7;
  --human-white:#fffdf8;
  --human-coral:#e47b62;
  --human-teal:#5b8179;
  --human-yellow:#f1c96d;
  --human-mint:#dce8dd;
  --human-pencil:rgba(48,51,46,.25);
}
body{color:var(--human-ink);background-color:var(--human-paper)}

/* Friendly header without turning it into a pastel template. */
.site-header{background:#343934!important;border-bottom-color:rgba(255,255,255,.12)!important}
.site-header>.zt-menu-panel{background:#3e4640!important}
.zt-header-primary a:after{height:3px!important;background:var(--human-yellow)!important;border-radius:999px}
.menu-toggle i{border-radius:44% 56% 48% 52%/55% 44% 56% 45%!important}

/* Hero gets warmer photography and a small hand-cut colour tab. */
.home-hero-f{background:#fffdf8}
.hhf-word{filter:brightness(.73) saturate(.82) contrast(1.08)}
.hhf-word:after{height:7px;background:var(--human-yellow);border-radius:60% 40% 55% 45%;transform:rotate(-2.3deg)}
.hhf-copy small{color:var(--human-coral)}
.hhf-track img{filter:saturate(.9) contrast(1.01)}
.hhf-track>button.active img{border-radius:3px 24px 4px 18px}
.hhf-prev,.hhf-next{background:var(--human-white)!important;border-color:rgba(48,51,46,.28)!important}
.hhf-dots i:after{background:var(--human-coral)!important}

/* Coloured slips feel collaged rather than mechanically labelled. */
.intro .section-label,.journal-home .section-label{color:var(--human-teal)!important}
.works-home .section-label{color:#914d3e!important;background:#f8d8c8;border:0!important;border-radius:2px 8px 3px 7px;padding:.6rem .85rem!important}
.service-home .section-label{color:#fff6dd!important}
.home-activities .section-label{color:#f5c878!important}

.seo-intro{background:#fffdf8!important}
.seo-intro:after{
  content:"";
  position:absolute;
  right:5vw;
  top:clamp(4rem,7vw,7rem);
  width:clamp(45px,6vw,90px);
  aspect-ratio:1;
  border-radius:48% 52% 61% 39%/44% 38% 62% 56%;
  background:var(--human-mint);
  opacity:.8;
  transform:rotate(12deg);
}
.seo-intro-title>span{color:var(--human-teal)}
.seo-intro nav a{transition:background .25s ease,padding .25s ease}
.seo-intro nav a:hover{background:#f8e6d9;padding-left:1rem!important}
.seo-intro nav a b{color:var(--human-coral)}

/* About should feel sunlit and conversational. */
.intro{background:#fffaf0!important}
.intro img{clip-path:none;border-radius:3px 38px 5px 25px;box-shadow:13px 15px 0 #dce8dd}
.intro .kicker{color:#5b746d}
.intro .two-col h2:after{border:0;height:8px;background:var(--human-yellow);border-radius:99px;opacity:.85}
.intro .two-col>div:last-child{position:relative}
.intro .two-col>div:last-child:before{
  content:"";
  position:absolute;
  right:3%;
  top:clamp(1rem,7vw,6rem);
  width:24px;
  height:24px;
  border:3px solid var(--human-coral);
  border-radius:50%;
  opacity:.65;
}

/* A calmer garden green replaces the corporate dark panel. */
.service-home{background:#66857d!important}
.service-home>h2{color:#fffdf7!important}
.service-home article{border-color:rgba(255,255,255,.32)!important}
.service-home article:nth-of-type(even){background:rgba(255,253,248,.035)}
.service-home article:hover{background:#fff7e8!important;color:#34453f!important;border-radius:4px 18px 4px 14px}
.service-home article:hover h3{color:#34453f!important}
.service-home article:hover span{color:var(--human-coral)!important}

/* Portfolio uses warm paper and small colour offsets, not fashionable ghost type. */
.works-home{background:#f4ecdc!important}
.works-home .work-grid>a{position:relative}
.works-home .work-grid>a:before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-8px;
  top:-8px;
  width:38%;
  height:34%;
  border-radius:4px 18px 4px 16px;
  background:#dce8dd;
}
.works-home .work-grid>a:nth-child(2):before{background:#f3d7ca;left:auto;right:-8px}
.works-home .work-grid>a:nth-child(3):before{background:#f1d989}
.works-home .work-grid>a:nth-child(4):before{background:#cadfda}
.works-home .work-grid img{clip-path:none;border-radius:2px 20px 3px 13px;filter:saturate(.86) contrast(1)!important}
.works-home .work-grid>a:nth-child(even) img{border-radius:18px 3px 16px 2px}

/* Activities become warm charcoal and playful, not severe black. */
.home-activities{background:#353a35!important}
.home-activities header h2{color:#fff8e9}
.home-activities-grid figure{clip-path:none;border-radius:4px 32px 5px 22px;overflow:hidden}
.home-activities-grid>a:last-child figure{border-radius:28px 4px 20px 5px}
.home-activities-grid>a:first-child figure{box-shadow:-12px 13px 0 rgba(228,123,98,.6)}
.home-activities-grid>a:last-child figure{box-shadow:12px 13px 0 rgba(241,201,109,.55)}
.home-activities-grid small{color:#efad98!important}

.journal-home{background:#fffdf8!important}
.journal-home .post-row{border-color:rgba(48,51,46,.22)!important}
.journal-home .post-row-thumb{border-radius:3px 14px 3px 10px;background:#dce8dd}
.journal-home .post-row:nth-child(even) .post-row-thumb{border-radius:13px 3px 11px 2px}
.journal-home .post-row:hover h3{color:#c45e48}

/* Questions as loose notes rather than a serious data table. */
.answer-block{background:#e8eee2!important}
.answer-block>small{color:#c45e48!important}
.answer-block article{background:rgba(255,253,248,.38);margin-bottom:1rem;padding-right:clamp(1rem,3vw,3rem)!important;border-radius:3px 20px 4px 14px}
.answer-block article:nth-child(2),.answer-block article:nth-child(3){background:rgba(255,237,205,.55)}
.answer-block article:before{color:var(--human-coral)}

/* Final invitation is bright and approachable. */
.cta{background:#f5d99c!important}
.cta>a{background:#fffaf0;border:0!important;border-radius:5px 25px 6px 19px!important;box-shadow:8px 9px 0 rgba(91,129,121,.45)}
.cta>a:hover{background:#5b8179;color:#fff}
.site-footer{background:#303630!important}

@media(max-width:700px){
  .seo-intro:after{right:20px;top:3.2rem;width:45px;opacity:.55}
  .intro img{border-radius:3px 25px 4px 18px;box-shadow:8px 10px 0 #dce8dd}
  .service-home article:hover{border-radius:3px 12px 3px 10px}
  .works-home .work-grid>a:before{left:-5px;top:-5px}
  .works-home .work-grid>a:nth-child(2):before{left:auto;right:-5px}
  .home-activities-grid>a:first-child figure{box-shadow:-7px 9px 0 rgba(228,123,98,.55)}
  .home-activities-grid>a:last-child figure{box-shadow:7px 9px 0 rgba(241,201,109,.5)}
  .answer-block article{padding-left:3.2rem!important}
}

/* ================================================================
 * 3.2 Clean Pop
 * Pop comes from colour and type—not ornamental blobs or stray marks.
 * ================================================================ */
:root{
  --human-ink:#272a27;
  --human-paper:#f7f2e8;
  --human-white:#fffdf8;
  --human-coral:#ee725b;
  --human-teal:#397a70;
  --human-yellow:#f4c84f;
  --human-blue:#8fc8d5;
  --human-mint:#d9e9df;
}

/* Remove the decorative marks identified in review. */
.hhf-word:after,
.seo-intro:after,
.intro .two-col h2:after,
.intro .two-col>div:last-child:before,
.works-home .work-grid>a:before{display:none!important;content:none!important}

/* Remove overly organic clipping, floating shadows and arbitrary rotations. */
.hhf-track>button,
.hhf-track>button:nth-child(2),
.hhf-track>button:nth-child(3),
.hhf-track>button.active,
.service-home .section-label,
.works-home .section-label,
.home-activities header h2,
.home-activities-grid>a:first-child,
.home-activities-grid>a:last-child,
.journal-home .post-row-thumb,
.journal-home .post-row:nth-child(even) .post-row-thumb{transform:none!important}
.intro img,
.works-home .work-grid img,
.works-home .work-grid>a:nth-child(even) img,
.home-activities-grid figure,
.home-activities-grid>a:last-child figure,
.journal-home .post-row-thumb,
.journal-home .post-row:nth-child(even) .post-row-thumb{
  clip-path:none!important;
  border-radius:0!important;
  box-shadow:none!important;
}

/* Clear, cheerful hero details. */
.home-hero-f{background:#fffdf8}
.hhf-word{filter:brightness(.72) saturate(.92) contrast(1.08)}
.hhf-copy small{
  display:inline-block;
  width:max-content;
  padding:.5rem .65rem;
  background:var(--human-yellow);
  color:#272a27!important;
  font-weight:800;
}
.hhf-copy h1{font-weight:600!important}
.hhf-track>button.active img{border-radius:0!important}
.hhf-prev,.hhf-next{
  border-radius:50%!important;
  transform:none!important;
  background:#fff!important;
}
.hhf-prev:hover,.hhf-next:hover{background:var(--human-yellow)!important}

/* Labels become compact colour tags with consistent purpose. */
.section-label{font-weight:800!important}
.intro .section-label:before,.journal-home .section-label:before{display:none!important}
.intro .section-label,.journal-home .section-label,
.works-home .section-label,.service-home .section-label,.home-activities .section-label{
  width:max-content;
  padding:.55rem .75rem!important;
  border:0!important;
  writing-mode:horizontal-tb!important;
  color:#272a27!important;
  background:var(--human-yellow)!important;
}
.service-home .section-label{background:#ffd9cf!important}
.works-home .section-label{background:#9fd2dc!important}
.home-activities .section-label{background:#f4c84f!important}
.journal-home .section-label{background:#cbe2d5!important}

/* Pop through confident colour fields. */
.seo-intro{background:#fffdf8!important;border-bottom:12px solid var(--human-yellow)!important}
.seo-intro:before{color:var(--human-teal);font-weight:800}
.seo-intro h2{color:#272a27}
.seo-intro nav a{position:relative;background:#fffdf8}
.seo-intro nav a:nth-child(1):hover{background:#f9d8ce}
.seo-intro nav a:nth-child(2):hover{background:#d4e8dd}
.seo-intro nav a:nth-child(3):hover{background:#fae8ad}
.seo-intro nav a:nth-child(4):hover{background:#cce6ec}

.intro{background:#f8d9cf!important}
.intro img{border:8px solid #fffdf8!important}
.intro .kicker{color:#397a70;font-weight:700}
.intro .two-col h2{color:#272a27}

.service-home{background:#397a70!important;border-top:12px solid #b8ded3}
.service-home article:nth-of-type(even){background:transparent}
.service-home article:hover{
  padding-left:1rem!important;
  background:#fffdf8!important;
  border-radius:0!important;
}

.works-home{background:#f7e8b7!important;border-top:12px solid #f4c84f}
.works-home>h2{color:#272a27}
.works-home .work-grid img{border:8px solid #fffdf8!important}
.works-home .work-grid>a:nth-child(2) img{border-color:#cbe2d5!important}
.works-home .work-grid>a:nth-child(3) img{border-color:#f5cfc5!important}
.works-home .work-grid>a:nth-child(4) img{border-color:#bddfe6!important}

.home-activities{background:#303b37!important;border-top:12px solid var(--human-coral)}
.home-activities header h2{color:#fffdf8}
.home-activities-grid figure{border:8px solid #fffdf8}
.home-activities-grid>a:first-child figure{border-color:#f5cfc5}
.home-activities-grid>a:last-child figure{border-color:#f4d875}

.journal-home{background:#fffdf8!important;border-top:12px solid #9fd2dc}
.journal-home .post-row-thumb{border:4px solid #cbe2d5!important}
.journal-home .post-row:nth-child(even) .post-row-thumb{border-color:#f5cfc5!important}
.journal-home .post-row:hover h3{color:var(--human-coral)}

.answer-block{background:#cbe2d5!important;border-top:12px solid #397a70}
.answer-block article,
.answer-block article:nth-child(2),
.answer-block article:nth-child(3){
  margin:0!important;
  background:transparent!important;
  border-radius:0!important;
}
.answer-block article:nth-child(1),.answer-block article:nth-child(4){background:rgba(255,253,248,.5)!important}

.home-yokomichi{border-top:12px solid #ee725b}
.cta{background:#f4c84f!important;border-top:12px solid #ee725b}
.cta>a{
  border-radius:0!important;
  box-shadow:none!important;
  transform:none!important;
  background:#397a70!important;
  color:#fff!important;
}
.cta>a:hover{background:#ee725b!important}

/* Stronger but still grown-up typography. */
.seo-intro h2,.intro h2,.service-home>h2,.works-home>h2,
.home-activities h2,.journal-home h2,.answer-block>h2,.cta h2{
  text-wrap:balance;
}
.service-home>h2,.works-home>h2,.home-activities h2{font-weight:600!important}

@media(max-width:700px){
  .hhf-copy small{padding:.4rem .55rem}
  .intro img,.works-home .work-grid img,.home-activities-grid figure{border-width:5px!important}
  .service-home article:hover{padding-left:.5rem!important}
  .answer-block article:nth-child(1),.answer-block article:nth-child(4){background:transparent!important}
  .answer-block article:nth-child(even){background:rgba(255,253,248,.38)!important}
}

/* ================================================================
 * 3.3 Rugged Mid-century
 * A worn-in, architectural palette with restrained organic geometry.
 * ================================================================ */
:root{
  --human-ink:#292a24;
  --human-paper:#e9e1cf;
  --human-white:#f4eedf;
  --human-coral:#b9583d;
  --human-teal:#49675d;
  --human-yellow:#c79a3b;
  --human-blue:#6f8c89;
  --human-mint:#aeb8a2;
  --mc-olive:#62684c;
  --mc-mustard:#c49a3a;
  --mc-rust:#ad5437;
  --mc-tobacco:#73523b;
  --mc-cream:#e9e1cf;
  --mc-bone:#f4eedf;
  --mc-charcoal:#292a24;
}

body{
  color:var(--mc-charcoal);
  background-color:var(--mc-cream);
  background-image:
    radial-gradient(circle at 20% 30%,rgba(41,42,36,.028) 0 1px,transparent 1.2px),
    radial-gradient(circle at 74% 65%,rgba(115,82,59,.022) 0 1px,transparent 1.1px);
  background-size:17px 19px,29px 27px;
}

/* Deep brown-black gives the chrome a warmer, more physical presence. */
.site-header{background:#292a24!important;border-bottom-color:rgba(233,225,207,.2)!important}
.site-header>.zt-menu-panel{background:#32332b!important}
.zt-header-primary a:after{background:var(--mc-rust)!important;border-radius:0!important}
.menu-toggle i{border-radius:42% 58% 45% 55%/52% 43% 57% 48%!important}

/* No stray ornaments: type and photography carry the hero. */
.hhf-word:after,.seo-intro:after,.intro .two-col h2:after,
.intro .two-col>div:last-child:before,.works-home .work-grid>a:before{
  display:none!important;
  content:none!important;
}
.home-hero-f{background:var(--mc-bone)}
.hhf-word{filter:sepia(.12) brightness(.66) saturate(.62) contrast(1.2)}
.hhf-copy small{
  padding:.48rem .65rem;
  background:var(--mc-rust)!important;
  color:var(--mc-bone)!important;
  border-radius:0!important;
}
.hhf-copy h1{color:var(--mc-charcoal);font-weight:600!important}
.hhf-track img{filter:saturate(.68) sepia(.08) contrast(1.08)}
.hhf-track>button.active img{border-radius:2px 30px 3px 20px!important}
.hhf-prev,.hhf-next{
  border-radius:45% 55% 48% 52%/55% 43% 57% 45%!important;
  border-color:rgba(41,42,36,.5)!important;
  background:var(--mc-cream)!important;
}
.hhf-prev:hover,.hhf-next:hover{background:var(--mc-mustard)!important;color:var(--mc-charcoal)}
.hhf-dots i:after{background:var(--mc-rust)!important}

/* Small utilitarian labels, like catalogue tabs. */
.intro .section-label,.journal-home .section-label,
.works-home .section-label,.service-home .section-label,.home-activities .section-label{
  padding:.5rem .7rem!important;
  color:var(--mc-bone)!important;
  background:var(--mc-rust)!important;
  border-radius:0!important;
  letter-spacing:.13em!important;
}
.service-home .section-label{background:var(--mc-mustard)!important;color:var(--mc-charcoal)!important}
.works-home .section-label{background:var(--mc-olive)!important}
.home-activities .section-label{background:var(--mc-rust)!important}
.journal-home .section-label{background:var(--mc-tobacco)!important}

/* Cream and bone alternate like aged editorial stock. */
.seo-intro{
  background:var(--mc-bone)!important;
  border-bottom:10px solid var(--mc-tobacco)!important;
}
.seo-intro:before{color:var(--mc-rust);font-weight:800}
.seo-intro-title>span{color:var(--mc-olive)}
.seo-intro nav a{background:transparent!important}
.seo-intro nav a:nth-child(n):hover{background:rgba(196,154,58,.18)!important}
.seo-intro nav a b{color:var(--mc-rust)}

.intro{background:#d5c8ad!important}
.intro img{
  border:0!important;
  border-radius:3px 36px 4px 24px!important;
  filter:saturate(.72) sepia(.09) contrast(1.07);
}
.intro .kicker{color:#4e5c4d;font-weight:700}
.intro .two-col h2{color:var(--mc-charcoal)}

/* Olive is more furniture/workwear than lifestyle-pastel. */
.service-home{background:var(--mc-olive)!important;border-top:10px solid var(--mc-charcoal)}
.service-home>h2{color:var(--mc-bone)!important}
.service-home article{border-color:rgba(244,238,223,.28)!important}
.service-home article:hover{
  padding-left:1rem!important;
  background:var(--mc-bone)!important;
  color:var(--mc-charcoal)!important;
  border-radius:2px 18px 3px 12px!important;
}
.service-home article:hover h3{color:var(--mc-charcoal)!important}
.service-home article:hover p{color:#5f5b4f!important}
.service-home article:hover span{color:var(--mc-rust)!important}

/* Portfolio: asymmetric scale remains, with irregular but purposeful corners. */
.works-home{background:var(--mc-cream)!important;border-top:10px solid var(--mc-mustard)}
.works-home .work-grid img{
  border:0!important;
  border-radius:3px 28px 3px 18px!important;
  filter:saturate(.7) sepia(.07) contrast(1.08)!important;
}
.works-home .work-grid>a:nth-child(2) img{border:0!important;border-radius:25px 3px 17px 2px!important}
.works-home .work-grid>a:nth-child(3) img{border:0!important;border-radius:2px 20px 28px 3px!important}
.works-home .work-grid>a:nth-child(4) img{border:0!important;border-radius:22px 2px 3px 15px!important}
.works-home .work-grid>a:hover img{filter:saturate(.88) sepia(.02) contrast(1.06)!important}
.works-home .work-grid small{color:var(--mc-rust)!important;font-weight:800!important}

/* Charcoal and rust make activities feel workshop-like, not cute. */
.home-activities{background:var(--mc-charcoal)!important;border-top:10px solid var(--mc-rust)}
.home-activities header h2{color:var(--mc-bone)}
.home-activities-grid figure{
  border:0!important;
  border-radius:3px 34px 4px 22px!important;
  box-shadow:none!important;
  overflow:hidden;
}
.home-activities-grid>a:last-child figure{border-radius:30px 3px 20px 4px!important}
.home-activities-grid img{filter:saturate(.67) sepia(.08) contrast(1.1)}
.home-activities-grid>a:hover img{filter:saturate(.84) sepia(.03) contrast(1.08)}
.home-activities-grid small{color:#d7a34b!important}

.journal-home{background:var(--mc-bone)!important;border-top:10px solid var(--mc-teal,var(--human-teal))}
.journal-home .post-row{border-color:rgba(41,42,36,.3)!important}
.journal-home .post-row-thumb{
  border:0!important;
  border-radius:2px 14px 3px 9px!important;
  filter:none;
}
.journal-home .post-row:nth-child(even) .post-row-thumb{border:0!important;border-radius:13px 2px 10px 3px!important}
.journal-home .post-row-thumb img{filter:saturate(.65) sepia(.08) contrast(1.07)}
.journal-home .post-row:hover h3{color:var(--mc-rust)}

.answer-block{background:#b9b49a!important;border-top:10px solid var(--mc-olive)}
.answer-block>small{color:var(--mc-rust)!important}
.answer-block article:nth-child(n){background:transparent!important;border-radius:0!important}
.answer-block article:nth-child(1),.answer-block article:nth-child(4){background:rgba(244,238,223,.34)!important}

/* Keep Yokomichi distinct, but tie it to the same warm period palette. */
.home-yokomichi{border-top:10px solid var(--mc-rust)}
.cta{background:var(--mc-mustard)!important;border-top:10px solid var(--mc-tobacco)}
.cta>a{
  background:var(--mc-charcoal)!important;
  color:var(--mc-bone)!important;
  border-radius:3px 24px 4px 16px!important;
}
.cta>a:hover{background:var(--mc-rust)!important}
.site-footer{background:#25261f!important}

/* Restore the slight irregularity without rotating whole components. */
.hhf-track>button,.hhf-track>button:nth-child(2),.hhf-track>button:nth-child(3),
.hhf-track>button.active,.service-home .section-label,.works-home .section-label,
.home-activities header h2,.home-activities-grid>a:first-child,
.home-activities-grid>a:last-child,.journal-home .post-row-thumb,
.journal-home .post-row:nth-child(even) .post-row-thumb{transform:none!important}

@media(max-width:700px){
  .hhf-track>button.active img{border-radius:2px 22px 3px 14px!important}
  .intro img{border-radius:2px 25px 3px 17px!important}
  .works-home .work-grid img{border-radius:2px 20px 3px 13px!important}
  .works-home .work-grid>a:nth-child(even) img{border-radius:18px 2px 12px 3px!important}
  .home-activities-grid figure{border-radius:2px 24px 3px 16px!important}
  .home-activities-grid>a:last-child figure{border-radius:22px 2px 14px 3px!important}
  .service-home article:hover{border-radius:2px 13px 3px 9px!important}
}

/* ================================================================
 * 3.4 Art-direction polish
 * Typography owns the hierarchy. Rules only appear where they clarify.
 * ================================================================ */

/* Remove the heavy section stripes and inherited table-like rules. */
.seo-intro,.service-home,.works-home,.home-activities,.journal-home,
.answer-block,.home-yokomichi,.cta{border-top:0!important;border-bottom:0!important}
.seo-intro-copy,.seo-intro nav,.service-home article,.service-home article:last-child,
.journal-home .post-row,.answer-block article,.answer-block article:nth-child(n),
.home-activities-grid>a,.works-home .work-grid>a,
.site-footer>small{border:0!important}

/* One deliberate type system: poster Gothic + editorial Mincho. */
.seo-intro h2,
.service-home>h2,
.works-home>h2,
.home-activities header h2,
.answer-block>h2{
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif!important;
  font-weight:700!important;
  font-feature-settings:"palt" 1;
  letter-spacing:-.065em!important;
  line-height:1.24!important;
}
.intro .two-col h2,
.journal-home h2,
.cta h2{
  font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN",serif!important;
  font-weight:500!important;
  font-feature-settings:"palt" 1;
  letter-spacing:-.045em!important;
  line-height:1.46!important;
}
.seo-intro h2{max-width:12.5em;font-size:clamp(2.65rem,4.4vw,5.25rem)!important}
.intro .two-col h2{max-width:9em;font-size:clamp(2.75rem,4.35vw,4.9rem)!important}
.service-home>h2{max-width:10.5em!important;font-size:clamp(2.75rem,4.55vw,5.15rem)!important}
.works-home>h2{font-size:clamp(2.7rem,4.25vw,4.8rem)!important}
.home-activities header h2{font-size:clamp(2.65rem,4.3vw,4.9rem)!important}
.journal-home h2{max-width:9em;font-size:clamp(2.65rem,4vw,4.45rem)!important}
.answer-block>h2{max-width:12em!important;font-size:clamp(2.45rem,3.8vw,4.2rem)!important}
.cta h2{max-width:10em;font-size:clamp(2.6rem,4.25vw,4.75rem)!important}

/* Labels become quiet catalogue notation—not stickers or underlines. */
.intro .section-label,.journal-home .section-label,
.works-home .section-label,.service-home .section-label,.home-activities .section-label{
  display:flex!important;
  align-items:center!important;
  gap:.7rem!important;
  padding:0!important;
  color:inherit!important;
  background:transparent!important;
  font-family:"Helvetica Neue",Arial,sans-serif!important;
  font-size:.58rem!important;
  font-weight:800!important;
  letter-spacing:.15em!important;
}
.intro .section-label:before,.journal-home .section-label:before,
.works-home .section-label:before,.service-home .section-label:before,
.home-activities .section-label:before{
  content:""!important;
  display:block!important;
  flex:0 0 auto;
  width:.62rem;
  height:.62rem;
  background:var(--mc-rust);
  transform:none!important;
}
.service-home .section-label:before{background:var(--mc-mustard)}
.works-home .section-label:before{background:var(--mc-olive)}
.home-activities .section-label:before{background:var(--mc-rust)}
.journal-home .section-label:before{background:var(--mc-tobacco)}
.service-home .section-label,.home-activities .section-label{color:var(--mc-bone)!important}

/* More disciplined vertical rhythm. */
.home-hero-f~section{--home-pad:clamp(6.75rem,9.2vw,10rem)}
.section,.seo-intro,.home-activities,.journal-home,.answer-block{
  padding-top:var(--home-pad)!important;
  padding-bottom:var(--home-pad)!important;
}
.intro .two-col{margin-top:clamp(3.2rem,5.5vw,5.8rem)!important}
.service-home>h2,.works-home>h2{margin-top:clamp(2.1rem,3.2vw,3.3rem)!important}

/* Intro: body copy aligns like a designed editorial column. */
.intro .two-col>div:last-child{padding-top:clamp(3rem,7vw,7rem)!important}
.intro .two-col>div:last-child>p{max-width:34rem;margin-bottom:1.35rem;font-size:.91rem;line-height:2.08;color:#4e4b42}
.intro .kicker{max-width:24rem;margin-top:1.35rem!important;padding-left:clamp(1.5rem,3vw,3.5rem);font-size:.89rem!important;line-height:1.85!important}

/* Service rows read as a composed index, without spreadsheet lines. */
.service-home .service-intro{margin-top:0;margin-bottom:clamp(2.8rem,5vw,5.2rem)}
.service-home article{
  position:relative;
  min-height:0!important;
  margin:0 0 .55rem!important;
  padding:1.65rem 1.25rem!important;
  background:rgba(244,238,223,.055);
  border-radius:2px 12px 2px 8px;
  transition:background .25s ease,color .25s ease,transform .25s ease!important;
}
.service-home article:nth-of-type(even){margin-left:clamp(1rem,4vw,4rem)!important;background:rgba(41,42,36,.12)}
.service-home article:hover{padding-left:1.25rem!important;transform:translateX(.35rem);border-radius:2px 16px 2px 10px!important}
.service-home article h3{
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif!important;
  font-size:clamp(1.15rem,1.55vw,1.48rem)!important;
  font-weight:700!important;
  line-height:1.5!important;
  letter-spacing:-.035em!important;
}
.service-home article p{font-size:.78rem!important;line-height:1.86!important}

/* Work captions have hierarchy; the image shape remains the hero. */
.works-home .work-grid{margin-top:clamp(3.5rem,6vw,6rem)!important}
.works-home .work-grid h3{
  margin:.62rem 0 0!important;
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif!important;
  font-size:clamp(1.08rem,1.55vw,1.42rem)!important;
  font-weight:700!important;
  line-height:1.5!important;
  letter-spacing:-.035em!important;
}
.works-home .work-grid small{margin-top:1.05rem!important;font-size:.57rem!important;letter-spacing:.15em!important}
.works-home>.text-link{margin-top:clamp(4rem,7vw,7rem)!important}

/* Activities: clearer contrast and calmer captions. */
.home-activities header{align-items:start!important}
.home-activities header>p:last-child{max-width:31rem;margin-top:.55rem;font-size:.82rem;line-height:1.95;color:rgba(244,238,223,.68)}
.home-activities-grid{margin-top:clamp(4rem,7vw,7rem)!important}
.home-activities-grid h3{
  margin:.75rem 0 .9rem!important;
  font-size:clamp(1.75rem,2.8vw,3rem)!important;
  line-height:1.2!important;
  letter-spacing:-.035em!important;
}
.home-activities-grid p{max-width:31rem;font-size:.78rem!important;line-height:1.9!important;color:rgba(244,238,223,.66)!important}

/* Journal rows use whitespace and alignment instead of repeated rules. */
.journal-home .post-row{
  position:relative;
  margin:0 0 .7rem!important;
  padding:1rem!important;
  background:rgba(115,82,59,.055);
  border-radius:2px 10px 2px 7px;
  transition:background .25s ease,transform .25s ease;
}
.journal-home .post-row:nth-child(even){margin-left:clamp(.5rem,2.5vw,2.5rem)!important;background:rgba(98,104,76,.075)}
.journal-home .post-row:hover{background:rgba(173,84,55,.12);transform:translateX(.28rem)}
.journal-home .post-row h3{
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif!important;
  font-size:clamp(.92rem,1.12vw,1.08rem)!important;
  font-weight:700!important;
  line-height:1.62!important;
  letter-spacing:-.025em!important;
}
.journal-home .post-row time{font-size:.55rem!important;letter-spacing:.08em;color:#7c7162}

/* FAQ: open editorial composition rather than boxed cells. */
.answer-block>div{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:clamp(2.5rem,5vw,5.5rem) clamp(3rem,8vw,8rem)!important;
  margin-top:clamp(3.2rem,5vw,5rem)!important;
}
.answer-block article:nth-child(n){
  position:relative;
  min-height:0;
  padding:0 0 0 3.25rem!important;
  background:transparent!important;
}
.answer-block article:before{
  top:-.15rem!important;
  left:0!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:1.85rem!important;
  font-weight:700!important;
  color:var(--mc-rust)!important;
}
.answer-block article h3{
  margin:0 0 .85rem!important;
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif!important;
  font-size:clamp(1rem,1.25vw,1.2rem)!important;
  font-weight:700!important;
  line-height:1.55!important;
  letter-spacing:-.025em!important;
}
.answer-block article p{max-width:31rem;font-size:.78rem!important;line-height:1.88!important;color:#525247!important}

/* Links have a short intentional marker instead of full-width underlines. */
.text-link{
  position:relative;
  padding:0 0 .65rem!important;
  text-decoration:none!important;
  font-size:.68rem!important;
  font-weight:700;
  letter-spacing:.06em;
}
.text-link:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:2.75rem;
  height:2px;
  background:currentColor;
  transition:width .3s ease;
}
.text-link:hover:after{width:100%}

/* Footer rules are reduced to spatial grouping. */
.site-footer{padding-top:clamp(4.5rem,7vw,7rem)!important}
.site-footer nav a{padding:.32rem 0!important}
.site-footer>small{margin-top:clamp(2rem,4vw,4rem);padding-top:0!important}

@media(max-width:900px){
  .service-home article:nth-of-type(even){margin-left:0!important}
  .journal-home .post-row:nth-child(even){margin-left:0!important}
}

@media(max-width:700px){
  .home-hero-f~section{--home-pad:clamp(4.8rem,17vw,6.5rem)}
  .seo-intro h2{font-size:clamp(2.2rem,10.6vw,3.3rem)!important;line-height:1.3!important}
  .intro .two-col h2{font-size:clamp(2.35rem,11vw,3.45rem)!important;line-height:1.48!important}
  .service-home>h2,.works-home>h2,.home-activities header h2{font-size:clamp(2.25rem,10.5vw,3.3rem)!important;line-height:1.28!important}
  .journal-home h2{font-size:clamp(2.25rem,10.3vw,3.25rem)!important}
  .answer-block>h2,.cta h2{font-size:clamp(2.15rem,9.7vw,3.05rem)!important}
  .intro .two-col>div:last-child{padding-top:.5rem!important}
  .service-home article{display:grid!important;margin-bottom:.45rem!important;padding:1.3rem .9rem!important}
  .service-home article:hover{padding-left:.9rem!important;transform:none}
  .works-home .work-grid h3{font-size:1.05rem!important}
  .home-activities-grid h3{font-size:clamp(1.7rem,8vw,2.25rem)!important}
  .journal-home .post-row{padding:.8rem!important;transform:none!important}
  .answer-block>div{grid-template-columns:1fr!important;gap:2.7rem!important}
  .answer-block article:nth-child(n){padding-left:2.75rem!important}
  .answer-block article:before{font-size:1.55rem!important}
}