/* page styles: tailormade.html */
/* ==========================================================================
Tailormade page — deliberately the plainest page on the site.
Everything here is built from primitives that already exist in
agile.css (.split, .ticks, .band). The one bespoke component is the
brief (.tm-brief), because a tailormade trip really does start as a
set of answers, and showing a filled-in one says more than a list of
adjectives would. Nothing else is invented.
========================================================================== */
/* Cairo's hero veil is tuned for a dark cityscape; this desk photo is
warm, bright and busy right where the centred type sits, so the
centre pool is deepened and the whole frame carries a little more
base tint. Same structure as the shared rule, just heavier. */
.band--hero .band__veil{
background:
radial-gradient(ellipse 74% 60% at 50% 48%,rgba(5,15,17,.78),rgba(5,15,17,0) 74%),
linear-gradient(to top,rgba(5,15,17,.94),rgba(5,15,17,.55) 45%,rgba(5,15,17,.7));
}
/* Cairo's --chars formula sizes one short place name to fill the width;
at ten letters that lands oversized here, so set the scale directly. */
.band--hero .band__dsp{font-size:clamp(34px,5.6vw,84px)}
/* asks — the three opening questions, redesigned as plain cards so the
question, the "why it matters" line and its icon read as one unit at
a glance, instead of a bare numbered column. */
.tm-asks{list-style:none;margin:clamp(34px,4.4vw,58px) 0 0;padding:0;
display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,20px)}
.tm-ask{
background:var(--ink-lift);border-radius:16px;padding:clamp(22px,2.6vw,28px);
display:flex;flex-direction:column;gap:10px;
transition:transform .4s var(--ease);
}
.tm-ask:hover{transform:translateY(-3px)}
.tm-ask__icon{width:28px;height:28px;color:var(--gold)}
.tm-ask__icon svg{width:100%;height:100%}
.tm-ask__n{font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--gold)}
.tm-ask__q{font-size:clamp(17px,1.7vw,20px);font-weight:800;letter-spacing:-.008em;margin:0}
.tm-ask__d{font-size:14px;line-height:1.65;color:var(--haze);margin:0}
body.theme-light .tm-ask{background:#fff;box-shadow:0 1px 0 rgb(var(--deep-rgb) / .08)}
body.theme-light .tm-ask__icon{color:var(--accent)}
body.theme-light .tm-ask__n{color:var(--accent)}
body.theme-light .tm-ask__d{color:var(--haze-dim)}
@media (max-width:760px){.tm-asks{grid-template-columns:1fr;gap:14px}}
/* brief — the one bespoke element on the page. It maps what the client
said onto what it actually changed in the itinerary, because the
point of a brief is the decisions it drives, not the form it fills.
Redesigned as "you said → we did" rows: the two labels stay visible
at every width (no header row to lose on mobile), and a small arrow
makes the cause-and-effect explicit rather than implied by styling. */
.tm-brief{background:var(--ink-lift);border-radius:16px;padding:clamp(18px,2.4vw,30px)}
.tm-brief__map{margin:0}
.tm-pair{display:grid;grid-template-columns:minmax(0,7rem) minmax(0,1fr) auto minmax(0,1fr);
gap:clamp(6px,1vw,10px) clamp(14px,1.8vw,24px);padding:18px 0;align-items:start}
.tm-pair + .tm-pair{border-top:1px solid var(--line)}
.tm-pair__tag{font-size:11px;font-weight:800;letter-spacing:.14em;
text-transform:uppercase;color:var(--gold);padding-top:3px;margin:0}
.tm-pair__said,.tm-pair__did{margin:0}
.tm-pair__label{display:block;font-size:9.5px;font-weight:700;letter-spacing:.16em;
text-transform:uppercase;margin:0 0 5px}
.tm-pair__said .tm-pair__label{color:var(--haze-dim)}
.tm-pair__did .tm-pair__label{color:var(--gold)}
.tm-pair__said{font-size:clamp(14.5px,1.25vw,16px);line-height:1.55;font-weight:600;color:var(--paper)}
.tm-pair__did{font-size:clamp(14px,1.2vw,15.5px);line-height:1.6;color:var(--haze)}
.tm-pair__arrow{align-self:center;color:var(--gold);opacity:.7}
.tm-pair__arrow svg{display:block;width:16px;height:16px}
@media (max-width:820px){
.tm-pair{grid-template-columns:1fr;gap:10px;padding:18px 0}
.tm-pair__tag{padding-top:0}
.tm-pair__arrow{display:none}
}
body.theme-light .tm-pair + .tm-pair{border-top-color:rgb(var(--deep-rgb) / .12)}
body.theme-light .tm-pair__tag{color:var(--accent)}
body.theme-light .tm-pair__said{color:var(--ink)}
body.theme-light .tm-pair__did{color:var(--haze-dim)}
body.theme-light .tm-pair__did .tm-pair__label{color:var(--accent)}
body.theme-light .tm-pair__arrow{color:var(--accent)}
/* flow — the four stages as a timeline rather than a list, because the
useful fact here is that the work passes back and forth: the tag on
each stage says who is holding it. Step three is the client's, so it
is the one marked in gold. --dot keeps the rail, the dots and the
masking ring aligned from a single number. */
.tm-flow{--dot:15px;--g:clamp(20px,2.8vw,40px);list-style:none;margin:0;padding:0;position:relative;
display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g)}
/* The rail sits behind the dots. Its right edge stops on the centre of
the fourth dot rather than running off to the container edge: one
column is (100% - 3 gaps) / 4, less half a dot. */
.tm-flow::before{content:"";position:absolute;top:calc(var(--dot) / 2 - 1px);left:0;
right:calc((100% - 3 * var(--g)) / 4 - var(--dot) / 2);
height:2px;background:var(--line-strong)}
.tm-fstep{position:relative;padding-top:calc(var(--dot) + 20px);display:flex;flex-direction:column;gap:7px}
.tm-fstep::before{content:"";position:absolute;top:0;left:0;width:var(--dot);height:var(--dot);
border-radius:50%;background:var(--haze-dim);box-shadow:0 0 0 5px var(--page-bg)}
.tm-fstep--you::before{background:var(--gold)}
.tm-fstep__tag{font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--haze-dim)}
.tm-fstep--you .tm-fstep__tag{color:var(--gold)}
.tm-fstep__t{font-size:clamp(16px,1.5vw,19px);font-weight:700;margin:0;letter-spacing:-.008em}
.tm-fstep__d{font-size:14px;line-height:1.65;color:var(--haze);margin:0}
body.theme-light .tm-fstep__d{color:var(--haze-dim)}
@media (max-width:820px){
/* rail turns vertical; dots run down the left margin */
.tm-flow{grid-template-columns:1fr;gap:0}
.tm-flow::before{top:2px;bottom:auto;left:calc(var(--dot) / 2 - 1px);right:auto;
width:2px;height:calc(100% - 2px - var(--dot) / 2)}
.tm-fstep{padding:0 0 26px calc(var(--dot) + 22px)}
.tm-fstep:last-child{padding-bottom:0}
.tm-fstep::before{top:2px}
}
body.theme-light .tm-brief{background:#fff;box-shadow:0 1px 0 rgb(var(--deep-rgb) / .08)}
/* card — step 1: the plain shell (header, photo, caption). Step 2
turns the single photo into a carousel: stacked images cross-fade
via .is-active, plain chevron arrows sit over the image with no
button background, and dots at the bottom track position. Step 4
adds two dimmed "peek" photos behind the card showing the previous
and next slide, updated in step with the carousel. */
.tm-postcard{position:relative;display:flex;align-items:center;justify-content:center;
margin-top:clamp(30px,4vw,46px);padding:clamp(20px,4vw,48px) 0;overflow-x:hidden}
.tm-postcard__peek{position:absolute;top:50%;width:clamp(180px,25vw,300px);
aspect-ratio:5/4;transform:translateY(-50%);border-radius:6px;overflow:hidden;
opacity:.55;filter:brightness(.7) saturate(.95);pointer-events:none;transition:opacity .3s ease}
.tm-postcard__peek img{display:block;width:100%;height:100%;object-fit:cover}
.tm-postcard__peek--l{left:clamp(-10px,1vw,30px)}
.tm-postcard__peek--r{right:clamp(-10px,1vw,30px)}
@media (max-width:820px){.tm-postcard__peek{display:none}}
.tm-card{width:min(94vw,430px);border-radius:14px;background:var(--ink);overflow:hidden}
.tm-card__head{display:flex;align-items:center;gap:10px;padding:14px 16px}
.tm-card__avatar{width:30px;height:30px;border-radius:50%;background:var(--ink-lift);
display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:6px}
.tm-card__avatar img{width:100%;height:100%;object-fit:contain}
.tm-card__handle{font-size:14.5px;font-weight:700;color:var(--paper);margin:0}
.tm-card__moreWrap{position:relative;margin-left:auto}
.tm-card__more{background:none;border:0;color:var(--paper);opacity:.8;
cursor:pointer;display:flex;padding:4px;font-size:17px}
.tm-card__menu{position:absolute;top:calc(100% + 6px);right:0;min-width:150px;
background:var(--ink-lift);border-radius:10px;padding:6px;
box-shadow:0 16px 34px -12px rgba(5,15,17,.55);
opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity .18s ease,transform .18s ease,visibility 0s .18s;z-index:5}
.tm-card__menu.is-open{opacity:1;visibility:visible;transform:translateY(0);
transition:opacity .18s ease,transform .18s ease}
.tm-card__menu a{display:block;padding:9px 10px;border-radius:6px;font-size:13.5px;
font-weight:600;color:var(--paper);text-decoration:none}
.tm-card__menu a:hover{background:rgba(255,255,255,.08)}
.tm-card__cap{margin:0;padding:4px 16px 18px;font-size:13px;line-height:1.5;color:var(--haze)}
.tm-card__cap strong{color:var(--paper);font-weight:700;margin-right:5px}
.tm-card__actions{display:flex;align-items:center;gap:16px;padding:13px 16px 4px}
.tm-card__actions > i{font-size:19px;color:var(--paper)}
.tm-card__like{display:flex;align-items:center;gap:7px;background:none;border:0;
cursor:pointer;color:var(--paper);font-size:14px;font-weight:600}
.tm-card__like i{font-size:19px;transition:transform .2s ease}
.tm-card__like.is-liked i{color:#EE5C6C;transform:scale(1.1)}
.tm-card__save{margin-left:auto;background:none;border:0;cursor:pointer;display:flex}
.tm-card__save i{font-size:19px;color:var(--paper)}
.tm-card__media{position:relative;aspect-ratio:1/1;background:#000}
.tm-card__img{position:absolute;inset:0;display:block;width:100%;height:100%;
object-fit:cover;opacity:0;transition:opacity .35s ease}
.tm-card__img.is-active{opacity:1}
.tm-card__arrow{position:absolute;top:50%;translate:0 -50%;width:26px;height:26px;
border:0;background:none;padding:0;color:#fff;
filter:drop-shadow(0 1px 3px rgba(0,0,0,.7));
display:flex;align-items:center;justify-content:center;cursor:pointer}
.tm-card__arrow svg{width:22px;height:22px}
.tm-card__arrow--l{left:16px}
.tm-card__arrow--r{right:16px}
.tm-card__dots{position:absolute;left:0;right:0;bottom:14px;display:flex;
align-items:center;justify-content:center;gap:6px}
.tm-card__dots button{width:6px;height:6px;border-radius:50%;border:0;padding:0;
background:rgba(255,255,255,.45);cursor:pointer;transition:transform .2s ease,background .2s ease}
.tm-card__dots button.is-active{background:#fff;transform:scale(1.35)}
/* message — a guest's own words, quoted rather than paraphrased.
Reuses the brief's gold rule/border language so it reads as part of
the same family instead of a bolted-on testimonial card. */
.tm-msg{border-left:2px solid var(--gold);padding-left:clamp(16px,2vw,22px);margin:clamp(22px,2.8vw,32px) 0 0;max-width:52ch}
.tm-msg p{font-size:clamp(15px,1.3vw,17px);line-height:1.65;font-style:italic;color:var(--paper);margin:0}
.tm-msg cite{display:block;margin-top:10px;font-size:11px;font-style:normal;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;color:var(--haze-dim)}
body.theme-light .tm-msg p{color:var(--ink)}
/* goPick — the opening move: one field, type a place or tap a chip to
fill it in — never both a grid of cards and a separate form. */
.tm-go{max-width:520px;margin:clamp(28px,3.6vw,44px) auto 0}
.tm-go__field{
display:flex;align-items:center;gap:12px;
border-bottom:1px solid var(--stack-line-strong,rgb(var(--deep-rgb) / .22));
padding-bottom:12px;transition:border-color .4s var(--ease);
}
.tm-go__field:focus-within{border-bottom-color:var(--gold)}
.tm-go__field input{
flex:1;min-width:0;font-family:var(--f);font-size:17px;color:var(--ink);
background:transparent;border:0;padding:4px 0;outline:none;
}
body.theme-light .tm-go__field input::placeholder{color:#8A9B9E}
.tm-go__go{
flex:none;width:38px;height:38px;border-radius:999px;border:0;cursor:pointer;
background:var(--ink);color:var(--gold);display:flex;align-items:center;justify-content:center;
transition:background .3s var(--ease);
}
.tm-go__go:hover{background:var(--deep)}
.tm-go__go svg{width:16px;height:16px}
.tm-go__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.tm-go__chip{
border:1px solid var(--stack-line-strong,rgb(var(--deep-rgb) / .22));background:transparent;
color:var(--muted-2);font-family:var(--f);font-size:12.5px;font-weight:600;cursor:pointer;
padding:8px 15px;border-radius:999px;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.tm-go__chip:hover{border-color:var(--deep);color:var(--deep)}
.tm-go__chip.is-active{background:var(--gold);border-color:var(--gold);color:var(--ink)}
/* goForm — appears only once the button is pressed, never on typing or
tapping a chip alone: those just fill the field. */
.tm-goForm{max-width:560px;margin:0 auto;opacity:0;transform:translateY(14px);
pointer-events:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.tm-goForm.is-open{opacity:1;transform:none;pointer-events:auto}
.tm-goForm__confirm{font-size:13.5px;color:var(--muted-2);margin:clamp(28px,3.6vw,44px) 0 18px;text-align:center}
.tm-goForm__confirm strong{color:var(--accent)}
/* begin — "Where it begins" as a side-by-side split: the bucket-list
copy on the left, three scene photos in a clean grid on the right,
vertically centred against each other rather than stacked. */
.tm-begin{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,64px);align-items:center}
@media (max-width:880px){.tm-begin{grid-template-columns:1fr;gap:clamp(30px,5vw,44px)}}
/* scenes — the trip's building blocks (desert, coast, river) as one
auto-advancing photo carousel rather than three separate tiles,
reusing the site's existing .carousel cross-fade (agile.js) so no
new script is needed. */
.tm-begin .media{border-radius:14px;aspect-ratio:4/3}
/* cherish — the closing reflection, set as an editorial pulled quote
(same family as .storyQuote elsewhere on the site) rather than a
plain paragraph, so the "we do what we cherish" line lands as a
tagline instead of just the last sentence in a block of text. */
.tm-cherish__mark{
display:block;font-family:var(--f-serif);
font-size:46px;line-height:.3;color:var(--gold);opacity:.55;margin:0 0 10px;
}
.tm-cherish__text{
font-family:var(--f-serif);font-style:italic;
font-size:clamp(16px,1.9vw,21px);line-height:1.6;color:var(--paper);margin:0;
}
.tm-cherish__lead{
margin:clamp(18px,2.4vw,26px) 0 6px;font-size:10.5px;font-weight:600;
letter-spacing:.2em;text-transform:uppercase;color:var(--haze-dim);
}
.tm-cherish__tag{
margin:0;font-size:clamp(19px,2.1vw,25px);font-weight:800;
letter-spacing:-.01em;color:var(--gold);
}
body.theme-light .tm-cherish__text{color:var(--ink)}
body.theme-light .tm-cherish__tag{color:var(--accent)}
/* pass — the "what you can shape" list rebuilt as a photo card grid,
matching the icon cards used for the opening three questions, so the
whole page reads as one system of cards rather than mixing a list
style here and a card style there. */
.tm-pass{list-style:none;margin:clamp(28px,3.6vw,44px) 0 0;padding:0;
display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,20px)}
.tm-passRow{background:var(--ink-lift);border-radius:14px;overflow:hidden;
display:flex;flex-direction:column;transition:transform .4s var(--ease)}
.tm-passRow:hover{transform:translateY(-3px)}
.tm-passRow__img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.tm-passRow__body{padding:14px 16px 18px}
.tm-passRow__n{display:block;font-size:10px;font-weight:800;letter-spacing:.18em;color:var(--gold);margin-bottom:6px}
.tm-passRow__t{margin:0;font-size:clamp(14px,1.15vw,15.5px);line-height:1.5;color:var(--paper)}
body.theme-light .tm-passRow{background:#fff;box-shadow:0 1px 0 rgb(var(--deep-rgb) / .08)}
body.theme-light .tm-passRow__n{color:var(--accent)}
body.theme-light .tm-passRow__t{color:var(--ink)}
@media (max-width:560px){.tm-pass{grid-template-columns:1fr}}
/* ==== copy as plain About-style rows: text beside an image slot
({PLACEHOLDER} until the real photos arrive), alternating sides ==== */
.tmPh{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#27474a,#0f2224)}
.tmPh span{font-size:clamp(16px,2vw,26px);font-weight:800;letter-spacing:.12em;color:rgba(255,255,255,.35)}
.aboutHero__img.tmPh span{margin-bottom:24vh}
.aboutHero__sub{margin:0;font-size:clamp(13px,1.05vw,15px);color:var(--paper);text-shadow:0 2px 14px rgba(0,0,0,.35)}
.tmRow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.5vw,72px);align-items:center}
.tmRow--flip .tmRow__text{order:2}
.tmRow__text{display:flex;flex-direction:column;gap:1em}
.tmRow__p{margin:0;font-size:clamp(17px,1.5vw,20px);line-height:1.7;color:var(--ink)}
.tmRow__p--lead{font-size:clamp(20px,2vw,27px);font-weight:700;line-height:1.4}
.tmRow__p--quote{font-style:italic;padding-left:18px;border-left:3px solid var(--accent)}
.tmRow__media{aspect-ratio:4/3;border-radius:16px;overflow:hidden}
.tmRow__media img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:820px){
.tmRow{grid-template-columns:1fr}
.tmRow--flip .tmRow__text{order:0}
}