/* ============================================================ ARKALYN PACIFIC DIGITAL Editorial / Pacific design system One stylesheet, no build step, no framework. ============================================================ */ :root{ /* ---- ground + brand ---- */ --paper:#FFFFFF; --paper-alt:#F7F8F5;--paper-soft:#FAFBF8; --white:#FFFFFF; --navy:#143257; --navy-deep:#0F2745; --navy-line:#24406A; --teal:#1F7A6B; --teal-bright:#17877A; --teal-pale:#8FBDB4; --sand:#C7B490; /* ---- type + rules ---- */ --ink:#243244; --body:#37455B; --muted:#5F6C80; --faint:#69737F; --rule:#E4E7EC; --rule-soft:#F1F3F6; --rule-navy:#24406A; --serif:'EB Garamond',Georgia,'Times New Roman',serif; --sans:'Montserrat','Helvetica Neue',Arial,system-ui,sans-serif; /* ---- rhythm ---- */ --gutter:clamp(20px,5vw,90px); --max:1440px; --sec:clamp(48px,6vw,74px); --shot-k:.28; /* ---- type scale: ONE source for every page, home included (2026-09-09) ---- */ --fs-d1:clamp(34px,5.4vw,58px); /* page h1 */ --fs-d2:clamp(26px,3.6vw,40px); /* big display */ --fs-d3:clamp(23px,2.9vw,32px); /* section heading */ --fs-d4:clamp(21px,2.4vw,27px); /* sub-heading */ --fs-d5:clamp(19px,1.8vw,22px); /* card / tile heading */ --fs-lede:clamp(14.5px,1.2vw,15px); /* intro paragraph */ --fs-p:14px; /* body */ --fs-p-sm:13px; /* small body */ --fs-lbl:9.5px; /* small caps label */ } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--paper);color:var(--body); font-family:var(--sans);font-size:15px;line-height:1.72; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img,svg{max-width:100%} h1,h2,h3,h4,p,figure,blockquote{margin:0} ul,ol{margin:0;padding:0;list-style:none} a{color:var(--teal);text-decoration:none;transition:color .14s ease} a:hover{color:var(--navy)} :focus-visible{outline:2px solid var(--teal);outline-offset:3px} ::selection{background:var(--teal);color:#fff} .skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 20px;z-index:100} .skip:focus{left:0} /* ============ LAYOUT ============ */ .wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)} .sec{padding-top:var(--sec);padding-bottom:var(--sec)} .sec-alt{background:var(--paper-alt)} .rail{display:grid;grid-template-columns:280px 1fr;gap:clamp(28px,6vw,96px);align-items:start} @media(max-width:860px){.rail{grid-template-columns:1fr;gap:22px}} .hr{border:0;border-top:1px solid var(--rule);margin:0} .hr-soft{border:0;border-top:1px solid var(--rule-soft);margin:0} /* ============ TYPE ============ */ .d1{font-family:var(--serif);font-weight:400;font-size:var(--fs-d1);line-height:1.14;letter-spacing:-.012em;color:var(--navy)} .d2{font-family:var(--serif);font-weight:400;font-size:var(--fs-d2);line-height:1.16;letter-spacing:-.008em;color:var(--navy)} .d3{font-family:var(--serif);font-weight:400;font-size:var(--fs-d3);line-height:1.28;letter-spacing:-.006em;color:var(--navy)} .d4{font-family:var(--serif);font-weight:400;font-size:var(--fs-d4);line-height:1.42;letter-spacing:-.004em;color:var(--navy)} .d5{font-family:var(--serif);font-weight:500;font-size:var(--fs-d5);line-height:1.34;color:var(--navy)} /* the signature move: teal italic on the emphasis word */ .em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--teal)} .on-navy .em{color:var(--teal-pale)} .lede{font-size:var(--fs-lede);line-height:1.78;color:var(--body);max-width:52ch} .p{font-size:var(--fs-p);line-height:1.75;color:var(--body);max-width:62ch} .p-sm{font-size:var(--fs-p-sm);line-height:1.72;color:var(--body)} .lbl{font-size:var(--fs-lbl);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);line-height:1.9} .lbl-teal{color:var(--teal)} .lbl-faint{color:var(--faint)}main .lbl{color:var(--teal)}/*2026-09-10 owner: every small label in page content is teal*/ .tealrule{width:52px;height:2px;background:var(--teal);border:0;margin:26px 0} .measure{max-width:58ch} /* ============ BUTTONS ============ */ .btn{display:inline-block;font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.02em; padding:14px 26px;border:1px solid var(--navy);background:var(--navy);color:#fff;transition:background .15s ease,border-color .15s ease} .btn:hover{background:var(--navy-deep);border-color:var(--navy-deep);color:#fff} .btn-teal{background:var(--teal-bright);border-color:var(--teal-bright)} .btn-teal:hover{background:var(--teal);border-color:var(--teal);color:#fff} .btn-ghost{background:transparent;color:var(--teal);border-color:var(--teal)} .btn-ghost:hover{background:var(--teal);color:#fff} .arrowlink{font-size:12.5px;font-weight:500;color:var(--teal);white-space:nowrap} .arrowlink::after{content:"\00a0\2192";display:inline-block;transition:transform .15s ease} .arrowlink:hover::after{transform:translateX(3px)} /* ============ HEADER ============ */ .site-head{background:var(--paper);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:50} .head-in{display:flex;align-items:center;gap:24px;height:96px} .head-in .brand{margin-right:auto} .head-in .nav{order:2} .head-in .head-cta{order:3} .brand{display:flex;align-items:center;gap:13px} .brand svg{width:38px;height:38px;flex:none} .brand b{display:block;font-size:17px;font-weight:700;letter-spacing:.24em;color:var(--navy);line-height:1} .brand span{display:block;font-size:10.5px;font-weight:500;letter-spacing:.20em;color:var(--muted);line-height:1;margin-top:5px} .brand em{display:block;font-family:var(--serif);font-style:italic;font-size:12.5px;color:var(--teal);line-height:1;margin-top:7px;letter-spacing:.005em} .site-foot .brand em{color:var(--teal-pale);font-size:13px} .nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,38px)} .nav a{font-size:13px;font-weight:500;color:var(--navy)} .nav a:hover{color:var(--teal)} .nav a[aria-current="page"]{color:var(--teal);border-bottom:2px solid var(--teal);padding-bottom:5px} .head-cta{padding:12px 22px;font-size:11px;letter-spacing:.11em;text-transform:uppercase} @media(max-width:900px){ /* Was: .nav a:not(.btn){display:none} - which hid Work, Services, About and Contact on every phone with no menu to replace them. Fixed 2026-09-08: the links wrap to a full-width second row instead. */ .head-in{height:auto;flex-wrap:wrap;row-gap:11px;column-gap:14px; padding-top:13px;padding-bottom:13px} /* NOT the padding shorthand: it would wipe the left/right gutter that .wrap sets, and the nav row would sit flush against the screen edge */ .head-in .nav{order:3;flex-basis:100%;justify-content:flex-start; gap:clamp(20px,7vw,40px);border-top:1px solid var(--rule-soft);padding-top:10px} /* flex-start with a gap, not space-between: menu items get switched on and off (see NAV_ALL in content.py), and with only two showing, space-between threw them to opposite edges and looked like a fault. Left-aligned reads as deliberate at any count. */ .nav a{font-size:12.5px;padding:5px 2px} } @media(max-width:560px){ .brand svg{width:32px;height:32px} .brand b{font-size:15px;letter-spacing:.2em} .brand span{font-size:9.5px;letter-spacing:.16em} .brand em{font-size:11px} .head-cta{padding:11px 14px;font-size:10px;letter-spacing:.08em} .head-in{column-gap:12px;padding-top:11px;padding-bottom:11px} .nav a{font-size:12px} } .crumb{border-bottom:1px solid var(--rule-soft);padding:14px 0} .crumb a{color:var(--teal);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .15s ease} .crumb a:hover,.crumb a:focus-visible{border-bottom-color:var(--teal)} .arrowlink.back::after{content:none} .arrowlink.back::before{content:"\2190\00a0";display:inline-block;transition:transform .15s ease} .arrowlink.back:hover::before{transform:translateX(-3px)} /* ============ WOVEN BAND (Micronesian lattice) ============ */ .weave{display:block;width:100%;height:30px;opacity:.85} /* ============ HERO ============ */ .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,672px);gap:clamp(24px,4vw,60px);align-items:start; padding-top:clamp(34px,4vw,54px);padding-bottom:clamp(34px,4vw,48px)} @media(max-width:1040px){.hero{grid-template-columns:1fr}.hero-art{order:2;margin-top:10px}.hero-copy{order:1}} .hero-copy{max-width:560px} .hero-art{position:relative;min-height:300px} .hero-art .contours{position:absolute;left:0;top:14px;width:100%;height:auto} .hero-art .route{position:absolute;left:0;top:120px;width:84%;height:auto} .hero-art .mark-lg{position:absolute;right:18%;top:0;width:min(286px,42vw);height:auto} .hero-art .compass{position:absolute;right:2%;top:66px;width:38px;height:38px} .hero-art .area{position:relative;margin-left:auto;width:min(296px,100%);padding-top:clamp(190px,26vw,300px)} .area-row{display:flex;gap:18px;padding:7px 0;border-top:1px solid var(--rule-soft);font-size:10px} .area-row b{width:78px;font-weight:600;letter-spacing:.14em;color:var(--navy)} .area-row span{color:var(--muted);letter-spacing:.05em} .cta-row{display:flex;align-items:center;gap:30px;flex-wrap:wrap;margin-top:34px} /* ============ SERVICE ROWS (not cards) ============ */ .svc{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px);padding:21px 0;border-bottom:1px solid var(--rule)} .svc:first-child{border-top:1px solid var(--rule)} .svc-n{width:26px;flex:none;font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--teal); border-bottom:1.5px solid var(--teal);padding-bottom:3px;align-self:flex-start;margin-top:4px} .svc-ic{flex:none} .svc-name{width:min(262px,30%);flex:none;font-size:clamp(16px,1.5vw,19px);font-weight:500;letter-spacing:-.005em;color:var(--navy)} .svc-desc{flex:1 1 auto;font-size:13px;line-height:1.7;color:var(--body);max-width:46ch} .svc-go{flex:none;color:var(--teal);font-size:15px}.svc-week{width:110px;flex:none} @media(max-width:820px){ .svc{display:grid;grid-template-columns:26px 22px 1fr;grid-template-areas:"n i name" ". . desc";row-gap:8px;column-gap:14px;align-items:center} .svc-n{grid-area:n}.svc-ic{grid-area:i}.svc-name{grid-area:name;width:auto}.svc-desc{grid-area:desc;max-width:none} .svc-go{display:none} .svc-step{grid-template-areas:"n i name" ". . week" ". . desc"}.svc-week{grid-area:week;width:auto}/*2026-09-10: About process rows on phones*/ } /* ============ REGIONAL STATEMENT ============ */ .region{display:grid;grid-template-columns:392px 1fr;align-items:stretch;min-height:286px} @media(max-width:900px){.region{grid-template-columns:1fr}} .region-panel{background:var(--navy);color:#fff;position:relative;overflow:hidden;padding:38px clamp(20px,4vw,34px); display:flex;flex-direction:column;justify-content:space-between;min-height:220px} .region-panel .contours{position:absolute;left:-40px;bottom:-30px;opacity:.9;width:130%;height:auto} .region-panel .big{position:relative;font-family:var(--serif);font-size:46px;line-height:1;color:#fff} .region-panel .big i{font-style:normal;font-size:22px} .region-copy{padding:clamp(28px,4vw,52px) clamp(20px,4vw,56px) clamp(28px,4vw,40px) clamp(20px,4vw,60px)} .specs{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--rule);background:var(--white)} .specs > div{padding:22px 26px;border-right:1px solid var(--rule)} .specs > div:last-child{border-right:0} @media(max-width:900px){.specs{grid-template-columns:repeat(2,1fr)}.specs > div:nth-child(2n){border-right:0} .specs > div:nth-child(-n+2){border-bottom:1px solid var(--rule)}} @media(max-width:520px){.specs{grid-template-columns:1fr}.specs > div{border-right:0;border-bottom:1px solid var(--rule)} .specs > div:last-child{border-bottom:0}} .spec-sub{font-size:12px;color:var(--muted);margin-top:8px} /* ============ WORK CARDS — screenshot leads ============ */ .grid-work{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch} @media(max-width:1080px){.grid-work{grid-template-columns:repeat(2,minmax(0,1fr))}} /* minmax(0,1fr), not 1fr: a grid item will not shrink below its content's min-width, and the drawn SVG screenshot inside each card forced the track to ~304px - which overflowed a 320px phone by 4px. 2026-09-08. */ @media(max-width:700px){.grid-work{grid-template-columns:minmax(0,1fr)}} .card{background:var(--white);border:1px solid var(--rule);display:flex;flex-direction:column} .shot{display:block;width:100%;height:auto;background:#EFF1F4;border-bottom:1px solid var(--rule)}img.shot{aspect-ratio:1440/780;object-fit:cover;object-position:top}/*2026-09-10: photo cards keep the drawn cards' shape*/ .card-body{padding:20px 22px 18px;display:flex;flex-direction:column;flex:1} .card-meta{display:flex;justify-content:space-between;align-items:baseline;gap:14px} .card h2,.card h3{font-family:var(--serif);font-size:22px;font-weight:500;color:var(--navy);margin-top:11px} .card .p-sm{margin-top:10px;flex:1} .card-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:16px;padding-top:15px;border-top:1px solid var(--rule-soft)} .chips{display:flex;gap:7px;flex-wrap:wrap} .chip{font-size:8.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);border:1px solid var(--rule);padding:5px 9px} /* ============ SECTORS + SEQUENCE ============ */ .sectors{display:flex;align-items:center;gap:clamp(18px,3vw,44px);flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--rule);margin-top:40px} .sectors ul{display:flex;gap:clamp(14px,2.4vw,34px);flex-wrap:wrap;font-size:12.5px;font-weight:500;color:var(--navy)} .seq{display:flex;align-items:center;flex-wrap:wrap;gap:0;margin-top:28px} .seq b{font-size:10.5px;font-weight:600;letter-spacing:.13em;color:var(--navy);border:1px solid var(--rule);padding:13px 24px} .seq b:last-child{color:var(--teal);border-color:var(--teal)} .seq i{width:30px;height:1px;background:var(--rule);display:block} @media(max-width:560px){.seq i{width:14px}.seq b{padding:11px 16px}} /* ============ CTA BAND ============ */ .cta{background:var(--navy);color:#fff;position:relative;overflow:hidden} .cta-in{display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,4vw,60px);flex-wrap:wrap; padding-top:clamp(40px,5vw,50px);padding-bottom:clamp(42px,5vw,52px);position:relative} .cta h2{font-family:var(--serif);font-size:clamp(28px,3.4vw,38px);font-weight:400;line-height:1.16;color:#fff;flex:0 0 330px} .cta p{font-size:13.5px;line-height:1.75;color:#fff;opacity:.8;flex:1 1 320px;max-width:38ch} .cta .weave-block{position:absolute;left:0;top:-30px;opacity:.5} .cta .waves{position:absolute;right:0;bottom:-70px;opacity:.28} @media(max-width:820px){.cta h2{flex-basis:100%}.cta .weave-block{display:none}} /* ============ FOOTER ============ */ .site-foot{background:var(--navy);color:#fff;position:relative;overflow:hidden} .foot-in{display:grid;grid-template-columns:250px repeat(4,1fr);gap:clamp(24px,3vw,70px); padding-top:clamp(34px,4vw,42px);position:relative} @media(max-width:1000px){.foot-in{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.foot-in{grid-template-columns:1fr}} .site-foot .brand b{color:#fff} .site-foot .brand span{color:var(--teal-pale)} .foot-col h2{font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#8FA2BE;margin-bottom:8px} /* h2, not h4: they sit inside the