/* DWE Digital — direction A "Gridnik" + the drawn growth curve from direction D.
   Tokens and rationale: ../design-directions/DIRECTIONS.md */
:root{
  --bone:#EEEAE0; --forest:#1E3A2B; --brass:#B4903E; --moss:#2F5A42; --ink:#14201A;
  --grid:rgba(30,58,43,.11); --grid-on-forest:rgba(238,234,224,.10);
  --sand:#E3DED1; --grid-on-sand:rgba(30,58,43,.14);
  --gutter:clamp(16px,3vw,40px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bone);color:var(--ink);font-family:"Bricolage Grotesque",system-ui,sans-serif;font-optical-sizing:auto;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible,.cell:focus-visible{outline:3px solid var(--brass);outline-offset:-3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--forest);color:var(--bone);padding:8px 12px;z-index:10}
.skip:focus{left:8px}

/* The grid is the identity: 12 columns drawn on the page, sections are rows. */
.frame{position:relative;max-width:1360px;margin:0 auto;padding:0 var(--gutter)}
.frame::before{content:"";position:absolute;top:0;bottom:0;left:var(--gutter);right:var(--gutter);pointer-events:none;
  background-image:linear-gradient(to right,var(--grid) 1px,transparent 1px);
  background-size:calc(100% / 12) 100%;border-right:1px solid var(--grid)}
.row{display:grid;grid-template-columns:repeat(12,1fr);border-top:1px solid var(--grid);position:relative}
.row:last-child{border-bottom:1px solid var(--grid)}

/* nav */
.nav{align-items:center;min-height:64px;border-top:0}
.brand{grid-column:1/4;display:flex;align-items:center;gap:14px;padding:12px 16px;text-decoration:none;font-weight:600;font-size:1rem}
.mark{height:28px;width:auto;fill:var(--forest)}
.links{grid-column:4/10;display:flex;gap:clamp(16px,3vw,40px);list-style:none;padding:0 16px;font-size:1rem}
.links a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.links a:hover{border-bottom-color:var(--forest)}
.cta{grid-column:10/13;justify-self:end;background:var(--forest);color:var(--bone);text-decoration:none;padding:12px 20px;font-weight:600;margin:8px 10px}
.cta:hover{background:var(--moss)}

/* hero: a chart row on graph paper, then the statement */
.hero{border-top:1px solid var(--grid);padding-bottom:clamp(3rem,8vh,6rem)}
.chart{grid-column:1/13;position:relative;height:clamp(150px,28vh,280px);border-bottom:1px solid var(--grid);
  background-image:linear-gradient(to bottom,var(--grid) 1px,transparent 1px);background-size:100% 25%}
.curve{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.curve path{fill:none;stroke:var(--forest);stroke-width:1.5;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.4s cubic-bezier(.4,0,.2,1) .3s forwards}
.now{position:absolute;right:0;top:8%;width:12px;height:12px;background:var(--brass);transform:translate(50%,-50%);opacity:0;animation:appear .3s ease 2.7s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes appear{to{opacity:1}}
.hero h1{grid-column:1/12;padding:0 16px;margin-top:clamp(2.5rem,8vh,5rem);font-size:clamp(3rem,9.2vw,8.75rem);font-weight:500;line-height:.9;letter-spacing:-.035em;font-variation-settings:"opsz" 96}
.hero p{grid-column:1/6;padding:0 16px;font-size:1.125rem;margin-top:clamp(2rem,6vh,4rem);max-width:34rem}
.hero .actions{grid-column:1/8;padding:0 16px;margin-top:2rem;display:flex;gap:2rem;align-items:center;flex-wrap:wrap}
.hero .actions .cta{grid-column:auto;justify-self:auto;margin:0}
.hero .actions .quiet{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}

/* section headings sit in their own row */
.head{grid-column:1/8;padding:clamp(3rem,7vh,4.5rem) 16px 1.5rem;font-size:clamp(1.75rem,3.2vw,2.75rem);font-weight:500;line-height:1;letter-spacing:-.025em;color:var(--ink)}
.note{grid-column:8/13;padding:0 16px 1.75rem;font-size:.9375rem;color:var(--moss);max-width:34rem;align-self:end}

/* blocks that break the page: a forest statement and a sand band, each drawing its own grid lines */
.statement{background-color:var(--forest);color:var(--bone);background-image:linear-gradient(to right,var(--grid-on-forest) 1px,transparent 1px);background-size:calc(100% / 12) 100%}
.statement p{grid-column:1/11;padding:clamp(3rem,9vh,6rem) 16px;font-size:clamp(1.625rem,3.4vw,3rem);font-weight:500;line-height:1.12;letter-spacing:-.025em;max-width:24em}
.band{background-color:var(--sand);background-image:linear-gradient(to right,var(--grid-on-sand) 1px,transparent 1px);background-size:calc(100% / 12) 100%}
.band+.band{border-top:1px solid var(--grid-on-sand)}
.band .tile{border-left-color:var(--grid-on-sand);padding-bottom:3rem}
.tiles.three .tile{grid-column:span 4}

/* services: cells that fill on hover / tap / focus */
.cells{border-top:0}
.cells.more{border-top:1px solid var(--grid)}
.cell.wide{grid-column:span 6;min-height:15rem}
/* four offers: two per row, so each has room to breathe */
.cells.four .cell{grid-column:span 6;min-height:17rem}
.cells.four .cell:nth-child(3){border-left:0}
.cells.four .cell:nth-child(n+3){border-top:1px solid var(--grid)}
.cells.four .cell p{max-width:32rem}
.cell{grid-column:span 4;min-height:22rem;padding:2.25rem 16px 2.75rem;border-left:1px solid var(--grid);position:relative;display:flex;flex-direction:column;gap:1.5rem;cursor:default;transition:background .25s ease,color .25s ease}
.cell:first-child{border-left:0}
.cell h3{font-size:clamp(1.625rem,2.6vw,2.25rem);font-weight:500;line-height:1.05;letter-spacing:-.02em;max-width:10em}
.cell p{font-size:1.0625rem;line-height:1.55;max-width:26rem;color:var(--moss);transition:color .25s ease}
.cell:hover,.cell.open,.cell:focus-within{background:var(--forest);color:var(--bone)}
.cell:hover p,.cell.open p,.cell:focus-within p{color:var(--bone)}

/* tiles: four short statements across the grid (situations, engagement models) */
.tiles{border-top:0}
.tile{grid-column:span 3;padding:1.5rem 16px 2rem;border-left:1px solid var(--grid)}
.tile:first-child{border-left:0}
.tile h3{font-size:1.25rem;font-weight:600;line-height:1.25;margin-bottom:.6rem;max-width:16em}
.marked .tile{padding-top:2rem}
.marked .tile::before{content:"";display:block;width:12px;height:12px;background:var(--forest);margin-bottom:1.25rem}
.tile p{font-size:1rem;max-width:22rem}

/* faq: a question column and an answer column, one rule per pair */
.faq{border-top:0}
.faq dt{grid-column:1/5;padding:1.5rem 16px;font-weight:600;font-size:1.0625rem;border-top:1px solid var(--grid)}
.faq dd{grid-column:5/13;padding:1.5rem 16px;border-top:1px solid var(--grid);border-left:1px solid var(--grid);max-width:44rem}
.faq dt:first-of-type,.faq dd:first-of-type{border-top:0}

/* outcomes: key figure in brass, the claim beneath */
.out{grid-column:span 6;padding:1.75rem 16px 2.25rem;border-left:1px solid var(--grid)}
.out:nth-child(odd){border-left:0}
.out:nth-child(n+3){border-top:1px solid var(--grid)}
.out .fig{display:block;font-size:clamp(3rem,6vw,5.5rem);font-weight:500;line-height:1;letter-spacing:-.03em;color:var(--brass);font-variation-settings:"opsz" 96}
.out p{margin-top:1rem;max-width:30rem;font-size:1.0625rem}
.out small{display:block;margin-top:.75rem;color:var(--moss);font-size:.9375rem}

/* approach: an actual sequence, drawn as a track. Stations sit on one continuous line
   that ends in the same brass square as the hero curve. */
.steps{list-style:none}
.step{grid-column:span 3;padding:1.5rem 16px 2.25rem;border-left:1px solid var(--grid);position:relative}
.step:first-child{border-left:0}
.node{position:relative;display:flex;align-items:center;gap:.75rem;height:28px}
.node::before{content:"";position:absolute;left:-16px;right:-16px;top:50%;height:1px;background:var(--forest)}
.step:first-child .node::before{left:0}
.step:last-child .node::before{right:0}
.step:last-child .node::after{content:"";position:absolute;right:0;top:50%;width:12px;height:12px;background:var(--brass);transform:translateY(-50%)}
.n{position:relative;width:28px;height:28px;flex:none;display:grid;place-items:center;background:var(--forest);color:var(--bone);font-size:.9375rem;font-weight:600}
.when{position:relative;background:var(--bone);padding:0 8px 0 4px;font-size:.875rem;color:var(--moss)}
.step h3{font-size:1.5rem;font-weight:500;margin:1.25rem 0 .75rem;letter-spacing:-.01em}
.step p{font-size:1rem;max-width:22rem}

/* about */
.about p{grid-column:1/8;padding:1.5rem 16px 2.5rem;font-size:1.25rem;line-height:1.45;max-width:38rem}
.facts{grid-column:9/13;padding:1.5rem 16px 2.5rem;list-style:none;font-size:1rem;border-left:1px solid var(--grid)}
.facts li{padding:.5rem 0;border-bottom:1px solid var(--grid)}
.facts li:last-child{border-bottom:0}
.facts b{font-weight:600;display:block;color:var(--moss);font-size:.875rem}

/* contact: the grid continues in bone on forest */
.contact{background:var(--forest);color:var(--bone)}
.contact .frame::before{background-image:linear-gradient(to right,var(--grid-on-forest) 1px,transparent 1px);border-right-color:var(--grid-on-forest)}
.contact .row{border-top:0}
.contact h2{grid-column:1/9;padding:clamp(3rem,8vh,6rem) 16px 1rem;font-size:clamp(2rem,4.5vw,4rem);font-weight:500;line-height:1;letter-spacing:-.03em}
.contact p{grid-column:1/7;padding:0 16px;font-size:1.125rem;max-width:32rem}
.contact .mail{grid-column:1/12;padding:2.5rem 16px clamp(3rem,8vh,6rem);font-size:clamp(1.5rem,4.5vw,3.5rem);font-weight:500;letter-spacing:-.02em;text-decoration:none;word-break:break-all}
.contact .mail:hover{color:var(--brass)}
.contact .side{grid-column:1/13;padding:0 16px 2rem;display:flex;gap:2rem;font-size:1rem}
.contact .side a{text-underline-offset:4px}

footer .row{border-top:1px solid var(--grid);border-bottom:0;font-size:.875rem;color:var(--moss)}
footer span{grid-column:1/7;padding:1.25rem 16px 2rem}
footer em{grid-column:7/13;padding:1.25rem 16px 2rem;font-style:normal;text-align:right}

@media (max-width:900px){
  .cell,.cell.wide,.cells.four .cell{grid-column:span 12;min-height:auto;border-left:0;border-top:1px solid var(--grid)}
  .cell:first-child{border-top:0}
  .cells.more .cell:first-child{border-top:0}
  .tile,.tiles.three .tile{grid-column:span 6}
  .tile:nth-child(3){border-left:0}
  .tile:nth-child(n+3){border-top:1px solid var(--grid)}
  .note{grid-column:1/13;padding-top:0}
  .head{grid-column:1/13}
  .statement p{grid-column:1/13}
  .step{grid-column:span 12;border-left:0;padding-left:58px;padding-bottom:2.5rem}
  .step::before{content:"";position:absolute;left:29px;top:0;bottom:0;width:1px;background:var(--forest)}
  .step:first-child::before{top:calc(1.5rem + 14px)}
  .step:last-child::before{bottom:auto;height:calc(1.5rem + 14px)}
  .node::before,.step:last-child .node::after{display:none}
  .n{position:absolute;left:-42px;top:0}
  .when{padding-left:0}
  .about p{grid-column:1/13}.facts{grid-column:1/13;border-left:0;border-top:1px solid var(--grid)}
  .hero p{grid-column:1/10}
}
@media (max-width:640px){
  .nav{grid-template-columns:1fr auto;min-height:0}
  .brand{grid-column:1;grid-row:1}.cta{grid-column:2;grid-row:1}
  .links{grid-column:1/3;grid-row:2;border-top:1px solid var(--grid);padding:16px;gap:18px;font-size:.9375rem;overflow-x:auto;scrollbar-width:none}
  .links::-webkit-scrollbar{display:none}
  .hero h1{grid-column:1/13;margin-top:2rem}
  .head{grid-column:1/13}
  .tile,.tiles.three .tile{grid-column:span 12;border-left:0;border-top:1px solid var(--grid)}
  .tile:first-child{border-top:0}
  .faq dt{grid-column:1/13;padding-bottom:.25rem}
  .faq dd{grid-column:1/13;border-top:0;border-left:0;padding-top:0}
  .out{grid-column:span 12;border-left:0}
  .out:nth-child(n+2){border-top:1px solid var(--grid)}
  .contact h2,.contact p,.contact .mail{grid-column:1/13}
  footer span,footer em{grid-column:1/13;text-align:left;padding:.5rem 16px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  .curve path{animation:none;stroke-dashoffset:0}
  .now{animation:none;opacity:1}
}